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

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.14

Dieser Artikel dokumentiert den Installations- un...

Installationsprozess des mysql5.6.8-Quellcodes

Kernel: [root@opop ~]# cat /etc/centos-release Ce...

Was tun, wenn Sie Ihr MySQL-Passwort vergessen?

Lösung zum Vergessen des MySQL-Passworts: [root@l...

React + ts realisiert den sekundären Verknüpfungseffekt

In diesem Artikel wird der spezifische Code von R...

Beispielcode zur Implementierung des Bildschubladeneffekts mit CSS3

Wie üblich posten wir zuerst den Bildeffekt: Das ...

MySQL-Indexoptimierung: Detaillierte Einführung in die Paging-Erkundung

Inhaltsverzeichnis MySQL-Indexoptimierung – Pagin...

Lösung für die horizontale Bildlaufleiste im Iframe unter IE6

Die Situation ist wie folgt: (PS: Das rote Kästche...

Lösung für „Ubuntu kann keine Verbindung zum Netzwerk herstellen“

Effektive Lösung für Ubuntu, wenn in einer virtue...

Detaillierte Erläuterung der dauerhaften Speicherung von Redis unter Docker

In diesem Kapitel beginnen wir mit dem Betrieb vo...

So verwenden Sie JS zum Parsen des Excel-Inhalts in der Zwischenablage

Inhaltsverzeichnis Vorwort 1. Ereignisse und Zwis...

So implementieren Sie die Anpassung des Echats-Diagramms an große Bildschirme

Inhaltsverzeichnis beschreiben erreichen Die Proj...

Mehrere Möglichkeiten zur Lösung von CSS-Stilkonflikten (Zusammenfassung)

1. Verfeinern Sie den Selektor Durch die Verwendu...

So stellen Sie Solidity-Smart-Contracts mit ethers.js bereit

Wenn Sie DApps auf Ethereum entwickelt haben, hab...

Lösen Sie das Problem des Ablaufs des TLS-Zertifikats (SSL) von Docker

Problemphänomen: [root@localhost ~]# Docker-Image...

Reiner CSS-Code zum Erzielen eines Drag-Effekts

Inhaltsverzeichnis 1. Beispiel für Drag-Effekt 2....