Ausführliche Erläuterung relevanter Kenntnisse zu abgerundeten Ecken in CSS3

Abgerundete CSS3-Ecken

Mit der CSS3-Grenzradius-Eigenschaft können Sie „abgerundete Ecken“ für jedes Element erstellen.

Browser-Unterstützung

Die Zahl in der Tabelle stellt die Versionsnummer des ersten Browsers dar, der dieses Attribut unterstützt. Die Zahl vor

-webkit- oder -moz- gibt die erste Version an, die dieses Präfix unterstützt.

CSS3-Eigenschaft „Rahmenradius“

Mit der CSS3-Eigenschaft „Rahmenradius“ können Sie für jedes Element „abgerundete Ecken“ erstellen.

Der Code lautet wie folgt:

#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

CSS3-Randradius – Geben Sie jede abgerundete Ecke an

Wenn Sie nur einen Wert im Attribut „Randradius“ angeben, ist dies der Fall Es werden 4 abgerundete Ecken erzeugt.

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, der dritte Wert ist die untere rechte Ecke

Zwei Werte: die 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: Die vier abgerundeten Ecken haben den gleichen Wert

Der Es folgt der Quellcode:

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners6 {
    border-radius: 15px 50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

Sie können auch elliptische Ecken erstellen:

Beispiel

#rcorners7 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners8 {
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners9 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;
}

[Verwandte Empfehlungen]

1. Besondere Empfehlung: Version „php Programmer Toolbox“ V0.1 herunterladen

2. Kostenloses CSS-Online-Video-Tutorial

3 .php.cn Dugu Jiujian (2) - CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung relevanter Kenntnisse zu abgerundeten Ecken in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!