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
Verwendung des Vuex-Namespace
Inhaltsverzeichnis Da Vuex einen einzelnen Zustan...
Verwenden Sie Elasticsearch, um Indexdaten regelmäßig zu löschen
1. Manchmal verwenden wir ES Aufgrund begrenzter ...
HTML-Subtag und Sup-Tag
Heute stelle ich zwei HTML-Tags vor, die ich nich...
Installieren Sie die MySQL5.5-Datenbank in einer CentOS7-Umgebung
Inhaltsverzeichnis 1. Prüfen Sie, ob MySQL auf de...
So verwenden Sie Bind zum Einrichten eines DNS-Servers
DNS (Domain Name Server) ist ein Server, der Domä...
Das MySQL-Passwort enthält Sonderzeichen und den Anmeldevorgang über die Befehlszeile
Um uns auf dem Server schnell bei der Datenbank a...
10 Minuten, um das Single-Page-Anwendungsrouting des WeChat-Applets gründlich zu verstehen
Merkmale einer Single-Page-Anwendung „Annahme:“ A...
Benutzerdefinierte Tabbar-Komponente für das WeChat-Applet
In diesem Artikel wird der spezifische Code der b...
Einführung in das Fokuselement document.activeELEment in JavaScript
Inhaltsverzeichnis 1. Der Fokus liegt standardmäß...
Über die Position des H1-Tags in XHTML
In letzter Zeit wurde viel über H1 diskutiert (auf...
Detaillierte Erklärung des JavaScript ES6-Moduls
Inhaltsverzeichnis 0. Was ist ein Modul 1.Modul l...
Detaillierte Erklärung zur Verwendung des MySQL-Sicherungsskripts mysqldump
In diesem Artikel wird das MySQL-Sicherungsskript...
Eine einfache Methode zum Implementieren einer geplanten Sicherung einer MySQL-Datenbank unter Linux
Hier sind die detaillierten Schritte: 1. Überprüf...
Detaillierte Erläuterung der Ausführung von SQL-Anweisungen (Übersicht über die MySQL-Architektur -> Abfrageausführungsprozess -> SQL-Analysereihenfolge)
Vorwort: Ich wollte schon immer wissen, wie eine ...
So laden Sie das JAR-Paket über die Webseite auf Nexus hoch
Wie lädt man das JAR-Paket in ein privates Lager ...