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

CSS Polarkoordinaten Beispielcode

Vorwort Das Projekt stellt Anforderungen an Karte...

Native JS-Implementierung des Ladefortschrittsbalkens

Dieser Artikel zeigt einen Spezialeffekt für dyna...

Detailliertes Tutorial zur Installation von MariaDB auf CentOS 8

Das Datenbankverwaltungssystem MariaDB ist ein Zw...

MySQL 8.0.21.0 Community Edition Installations-Tutorial (ausführliche Abbildungen)

1. MySQL herunterladen Melden Sie sich auf der of...

Ideen und Methoden zur Realisierung von Echtzeit-Protokollberichten mit der reinen Nginx-Konfiguration

Inhaltsverzeichnis Vorwort Umsetzungsideen Implem...

Lösen Sie das Problem der Randzusammenführung

1. Die Ränder von Geschwisterelementen zusammenfü...

Eine kurze Diskussion über die VUE Uni-App-Entwicklungsumgebung

Inhaltsverzeichnis 1. Über die visuelle Schnittst...

So implementieren Sie eine geplante Sicherung der CentOS MySQL-Datenbank

Das folgende Skript wird für die geplante Sicheru...

19 MySQL-Optimierungsmethoden im Datenbankmanagement

Nach der MySQL-Datenbankoptimierung kann nicht nu...

Bei der SQL-Optimierung treten häufig Fehler auf, weil Sie die Verwendung von MySQL nicht verstehen.

Inhaltsverzeichnis 1. Vorbereitung 2. Einführung ...

Analyse des Uniapp-Einsteiger-NVUE-Klettergrubenrekords

Inhaltsverzeichnis Vorwort Hallo Welt Bild Rahmen...

Detailliertes Tutorial zum Hochladen und Konfigurieren von JDK und Tomcat unter Linux

Vorbereitung 1. Starten Sie die virtuelle Maschin...

Beispielcode zum Bereitstellen eines Spring-Boot-Projekts mit Docker

1. Grundlegender Spring-Boot-Schnellstart 1.1 Sch...

Schritte zum Bereitstellen von Ingress-Nginx auf K8s

Inhaltsverzeichnis Vorwort 1. Bereitstellung und ...

Lösen Sie das Problem des Importierens von Webprojekten in Idea und deren Veröffentlichung in Tomcat

Idea importiert ein bestehendes Webprojekt und ve...