Detaillierte Erläuterung der Implementierungsmethode und Verwendung von abgerundeten Ecken mit CSS3-Randradius

Früher war es ziemlich mühsam, abgerundete Ecken zu erzielen, aber mit CSS3 ist das Erzielen abgerundeter Ecken so einfach geworden, dass nur ein Satz erforderlich ist: border-radius. Im Folgenden erläutert Ihnen Qingdao Star Network die spezifische Verwendung des Grenzradius.

Für abgerundete Ecken in CSS3 muss nur eine Eigenschaft festgelegt werden: border-radius (was „Randradius“ bedeutet). Sie geben einen Wert für diese Eigenschaft ein, um den Radius aller vier Ecken gleichzeitig festzulegen. Alle zulässigen CSS-Metriken können verwendet werden: em, ex, pt, px, Prozentsätze usw.

Browserunterstützung für Border-Radius

IE 9, Opera 10.5, Safari 5, Chrome 4 und Firefox 4 unterstützen alle die Border-Radius-Eigenschaft.

Frühere Versionen von Safari und Chrome unterstützen die Eigenschaft -webkit-border-radius.

Frühere Versionen von Firefox unterstützten die Eigenschaft -moz-border-radius.

Um die Kompatibilität sicherzustellen, müssen Sie derzeit nur -moz-border-radius und border-radius gleichzeitig festlegen.

-moz-Randradius: 15px;
Rahmenradius: 15px;

(Hinweis: Der Rahmenradius muss zuletzt deklariert werden, sonst kann er ungültig sein.)

Darüber hinaus verwendeten frühe Versionen von Firefox eine einzelne Syntax mit abgerundeten Ecken, die sich leicht von der Standardsyntax unterschied.

-moz-border-radius-topleft (Standardsyntax: border-top-left-radius)
-moz-border-radius-topright (Standardsyntax: border-top-right-radius)
-moz-border-radius-bottomleft (Standardsyntax: border-bottom-left-radius)
-moz-border-radius-bottomright (Standardsyntax: border-bottom-right-radius)

Beispiel für Border-Radius

#rcorners1 {
    Rahmenradius: 25px;
    Hintergrund: #8AC007;
    Polsterung: 20px;
    Breite: 200px;
    Höhe: 150px;
}
 
#rcorners2 {
    Rahmenradius: 25px;
    Rand: 2px durchgezogen #8AC007;
    Polsterung: 20px;
    Breite: 200px;
    Höhe: 150px;
}
 
#rcorners3 {
    Rahmenradius: 25px;
    Hintergrund: URL (Papier.gif);
    Hintergrundposition: links oben;
    Hintergrundwiederholung: wiederholen;
    Polsterung: 20px;
    Breite: 200px;
    Höhe: 150px;
}

CSS3 border-radius - gibt die abgerundeten Ecken jedes

Wenn Sie in der Eigenschaft „Border-Radius“ nur einen Wert angeben, werden vier abgerundete Ecken generiert.

Wenn Sie jedoch die vier Ecken einzeln angeben möchten, können Sie die folgenden Regeln verwenden:

Vier Werte: Der erste Wert ist die obere linke Ecke, der zweite Wert ist die obere rechte Ecke, der dritte Wert ist die untere rechte Ecke und der vierte Wert ist die untere linke Ecke.

Drei Werte: Der erste Wert ist die obere linke Ecke, der zweite Wert ist die obere rechte Ecke und die untere linke Ecke und der dritte Wert ist die untere rechte Ecke

Zwei Werte: Der erste Wert ist die obere linke Ecke und die untere rechte Ecke, der zweite Wert ist die obere rechte Ecke und die untere linke Ecke

Ein Wert: Alle vier Ecken haben den gleichen abgerundeten Wert

CSS3-Rahmenradiuseinstellung für einzelne abgerundete Ecken

Neben der Einstellung der abgerundeten Ecken aller vier Ecken gleichzeitig können Sie auch jede Ecke einzeln einstellen. Entsprechend den vier Ecken bietet CSS3 vier separate Eigenschaften:

Rahmen oben links - Radius

Rahmen oben rechts - Radius

Rand unten rechts - Radius

Rahmen unten links - Radius

Damit ist dieser Artikel über die Implementierung und Verwendung abgerundeter Ecken mit CSS3-Randradius abgeschlossen. Weitere relevante Inhalte zu abgerundeten Ecken mit CSS3-Randradius 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!