border-radius-Methode zum Hinzufügen abgerundeter Ränder zu Elementen
|
border-radius:10px; /* Alle Ecken sind mit einem Radius von 10px abgerundet*/
border-radius: 5px 4px 3px 2px; /* Die vier Radiuswerte sind die obere linke Ecke, die obere rechte Ecke, die untere rechte Ecke und die untere linke Ecke im Uhrzeigersinn*/
Denken Sie nicht, dass Rahmenradiuswerte nur in px-Einheiten ausgedrückt werden können. Sie können auch Prozentsätze oder Ems verwenden, aber die Kompatibilität ist derzeit nicht sehr gut. Durchgezogener oberer Halbkreis: Vorgehensweise: Stellen Sie die Höhe auf die Hälfte der Breite ein und stellen Sie nur den Radius der oberen linken und oberen rechten Ecke so ein, dass er der Höhe des Elements entspricht (er kann größer sein).
div{
Höhe: 50px;/*halbe Breite*/
Breite: 100px;
Hintergrund: #9da;
border-radius:50px 50px 0 0;/*Der Radius sollte mindestens dem Wert von height entsprechen*/
}
Ausgefüllter Kreis: Methode: Stellen Sie die Breiten- und Höhenwerte so ein, dass sie konsistent sind (d. h. ein Quadrat), und stellen Sie die vier Eckradiuswerte auf die Hälfte ihrer Werte ein. Der folgende Code:
div{
Höhe: 100px;/*dasselbe wie Breiteneinstellung*/
Breite: 100px;
Hintergrund: #9da;
border-radius:50px;/*Die vier Eckradiuswerte sind alle auf die Hälfte des Breiten- bzw. Höhenwerts eingestellt*/
}Vollständiger Code
<!doctype html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Randradius</www.dztcsd.com/title>
<style type="text/css">
div.Kreis{
Höhe: 100px;/*dasselbe wie Breiteneinstellung*/
Breite: 100px;
Hintergrund: #9da;
border-radius:50px;/*Die vier Eckradiuswerte sind alle auf die Hälfte des Breiten- bzw. Höhenwerts eingestellt*/
}
/*Aufgabenteil*/
div.Halbkreis{
Höhe: 100px;
Breite: 50px;
Hintergrund: #9da;
Randradius:?;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Kreis">
</div>
<br/>
<!--Aufgabenbereich-->
<div Klasse="Halbkreis">
</div>
</body>
</html>Dies ist das Ende dieses Artikels über die Border-Radius-Methode zum Hinzufügen abgerundeter Ränder zu Elementen. Weitere verwandte Inhalte zu abgerundeten Border-Radius-Rändern finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: So erstellen Sie einen SFTP-Server und einen Image-Server auf einem Linux-Cloud-Server
>>: Detaillierte Erklärung der Webseiten-Screenshot-Funktion in Vue
Artikel empfehlen
Implementierungscode zum Hinzufügen eines Schrägstrichs zum Vue-Elementheaders
<Vorlage> <div Klasse="App-Containe...
So verwenden Sie CURRENT_TIMESTAMP in MySQL
Inhaltsverzeichnis Verwendung von CURRENT_TIMESTA...
Implementierung der CSS-Transformation des Seitenumblätter-Animationsdatensatzes
Szenario mit dem Problem des Seitenumblätterns B ...
Linux wird geladen, vmlinux wird debuggt
Laden von Kernelsymbolen mit gdb arm-eabi-gdb out...
jQuery + h5 realisiert den Spezialeffekt der Neun-Quadrate-Lotterie (Front-End- und Back-End-Code)
Vorwort: Frontend: jq+h5, um den dynamischen Neun...
Stellen Sie in HTML die Bildlaufleiste so ein, dass sie automatisch angezeigt wird, wenn der Inhalt im Div überschreitet
In HTML-Seiten müssen wir manchmal automatisch ein...
So testen Sie die maximale Anzahl von TCP-Verbindungen in Linux
Vorwort Es besteht ein Missverständnis bezüglich ...
Backup zwischen MySQL-Datenbank und Oracle-Datenbank importieren
Importieren Sie die aus der Oracle-Datenbank expo...
Ubuntu 18.04 installiert MySQL 5.7.23
Ich habe MySQL zuvor problemlos in Ubuntu 16.04 i...
So implementieren Sie eine automatische Remote-Sicherung von MongoDB unter Linux
Vorwort Nachdem ich den vorherigen Artikel über d...
So erstellen Sie eine gespeicherte Prozedur in MySQL und fügen Datensätze in einer Schleife hinzu
Dieser Artikel beschreibt anhand eines Beispiels,...
Ist MySQL eine relationale Datenbank?
MySQL ist ein relationales Datenbankverwaltungssy...
So lösen Sie das Problem des verstümmelten DOS-Fensters in MySQL
Das Problem mit dem verstümmelten Code ist folgen...
CSS3 verwendet var()- und calc()-Funktionen, um Animationseffekte zu erzielen
Wissenspunkte in der Vorschau anzeigen. Animation...
So verwalten Sie MySQL-Indizes und Datentabellen
Inhaltsverzeichnis Tabellenkonflikte finden und b...