border-radius ist eine Methode zum Hinzufügen abgerundeter Ränder zu Elementen

border-radius ist eine 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).

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. div{
  2.   
  3. Höhe: 50px;/*halbe Breite*/
  4.   
  5. Breite: 100px;
  6.   
  7. Hintergrund: #9da;
  8.   
  9. border-radius:50px 50px 0 0;/*Der Radius sollte mindestens dem Wert von height entsprechen*/
  10.   
  11. }

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:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. div{
  2.   
  3. 　　Höhe : 100px ; /*dasselbe wie Breiteneinstellung*/   
  4.   
  5. 　　Breite : 100px ;
  6.   
  7. 　　Hintergrund : #9da ;
  8.   
  9. 　　border -radius: 50px ; /*Die vier Eckradiuswerte sind alle auf die Hälfte des Breiten- bzw. Höhenwerts eingestellt*/   
  10.   
  11. }
XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!doctype html >   
  2. < html >   
  3. <Kopf>​​   
  4. < Meta   Zeichensatz = "utf-8" >   
  5. <Titel> Rahmenradius < / www.dztcsd.com / Titel >   
  6. < Stil   Typ = "Text/CSS" >   
  7. div.Kreis{
  8. Höhe: 100px;/*dasselbe wie Breiteneinstellung*/
  9. Breite: 100px;
  10. Hintergrund: #9da;
  11. border-radius:50px;/*Die vier Eckradiuswerte sind alle auf die Hälfte des Breiten- bzw. Höhenwerts eingestellt*/
  12. }
  13. /*Aufgabenteil*/
  14. div.Halbkreis{
  15. Höhe: 100px;
  16. Breite: 50px;
  17. Hintergrund: #9da;
  18. Randradius:?;
  19. }
  20.       
  21. </ Stil >   
  22. </ Kopf >   
  23. < Textkörper >   
  24. < div   Klasse = "Kreis" >   
  25. </div>​​   
  26. < br />   
  27. <!--Aufgabenbereich-->   
  28. < div   Klasse = "Halbkreis" >   
  29. </div>​​   
  30.   
  31. </ Körper >   
  32. </ html >   

Das Obige ist der gesamte Inhalt der Border-Radius-Methode zum Hinzufügen abgerundeter Ränder zu Elementen. Ich hoffe, es wird allen helfen. Bitte unterstützen Sie 123WORDPRESS.COM~

<<:  Verwenden Sie Meta, um den Traffic-Cache zu löschen und die Seite bei jedem Besuch zu aktualisieren, um das Debuggen zu vereinfachen

>>:  Unterschiede zwischen Windows Server 2008R2, 2012, 2016 und 2019

Artikel empfehlen

Detailliertes Beispiel der MySQL curdate()-Funktion

Einführung in die MySQL CURDATE-Funktion Bei Verw...

Mehrere spezifische Methoden zur MySQL-Speicherplatzbereinigung

Inhaltsverzeichnis Vorwort 1. Überprüfen Sie die ...

Verwenden Sie CSS-Inhaltsattribute, um den Mouseover-Prompt-Effekt (Tooltip) zu erzielen

Warum erzielen wir diesen Effekt? Tatsächlich wir...

Linux CentOS6.5 yum installiere mysql5.6

In diesem Artikel wird der einfache Prozess der I...

Detaillierte Erklärung der praktischen Anwendung regulärer Ausdrücke in JavaScript

In der tatsächlichen Arbeit werden reguläre Ausdr...

So installieren Sie Tomcat-8.5.39 auf centos7.6

So installieren Sie Tomcat-8.5.39 auf CentOS 7.6....

Allgemeine Datumsvergleichs- und Berechnungsfunktionen in MySQL

Implementierung des Zeitvergleichs in MySql unix_...

CSS verwendet die Alibaba-Vektorbibliothek, um den entsprechenden Positionen schnell ansprechende Symboleffekte hinzuzufügen (Beispielcode).

Rufen Sie die Alibaba-Vektorsymbolbibliothek auf ...

Das WeChat-Applet implementiert die Aufnahmefunktion

In diesem Artikel wird der spezifische Code für d...

So ändern Sie schnell das Root-Passwort unter CentOS8

Starten Sie die virtuelle Centos8-Maschine und dr...

Gängige Angriffe auf Web-Frontends und Möglichkeiten, sie zu verhindern

Die Sicherheitsprobleme, die bei der Frontend-Ent...

Detaillierte Schritte zur Installation von MinIO auf Docker

Inhaltsverzeichnis 1. Überprüfen Sie, ob die Dock...

Detaillierte Erklärung zum Schreiben mehrerer Bedingungen von CSS: nicht

Der Pseudoklassenselektor :not kann Elemente filt...

Detaillierte Schritte zum Erstellen einer React-Anwendung mit einer Rails-API

Inhaltsverzeichnis Backend: Rails API-Teil Front-...

Ein Beispiel für die Verwendung einer MySQL-Anweisung, um die Anzahl der von verschiedenen Ganzzahlen belegten Bytes sowie deren Maximal- und Minimalwerte herauszufinden

Direkt codieren: Wählen Sie „bigint unsigned“ als...