Abgerundete CSS -Ecken
Abgerundete CSS-Ecken
Mit der CSS- border-radiusEigenschaft können Sie jedem Element "abgerundete Ecken" geben.
CSS Eigenschaft border-radius
Die CSS
border-radius-Eigenschaft definiert den Radius der Ecken eines Elements.
Tipp: Mit dieser Eigenschaft können Sie Elementen abgerundete Ecken hinzufügen!
Hier sind drei Beispiele:
1. Abgerundete Ecken für ein Element mit einer bestimmten Hintergrundfarbe:
Abgerundete Ecken!
2. Abgerundete Ecken für ein Element mit Rand:
Abgerundete Ecken!
3. Abgerundete Ecken für ein Element mit Hintergrundbild:
Abgerundete Ecken!
Hier ist der Code:
Beispiel
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
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;
}
Tipp: Die border-radiusEigenschaft ist eigentlich eine abgekürzte Eigenschaft für die
Eigenschaften border-top-left-radius, border-top-right-radius, border-bottom-right-radius
und border-bottom-left-radius.
CSS border-radius - Geben Sie jede Ecke an
Die border-radiusEigenschaft kann einen bis vier Werte haben. Hier sind die Regeln:
Vier Werte - Randradius: 15px 50px 30px 5px; (erster Wert gilt für die linke obere Ecke, zweiter Wert gilt für obere rechte Ecke, dritter Wert gilt für untere rechte Ecke und vierter Wert gilt für untere linke Ecke):
Drei Werte - border-radius: 15px 50px 30px; (erster Wert gilt für die obere linke Ecke, zweiter Wert gilt für obere rechte und untere linke Ecke und dritter Wert gilt für untere rechte Ecke):
Zwei Werte - border-radius: 15px 50px; (Der erste Wert gilt für die Ecken oben links und unten rechts, und der zweite Wert gilt für die Ecken oben rechts und unten links):
Ein Wert - Border-Radius: 15px; (der Wert gilt für alle vier Ecken, die gleichmäßig gerundet sind:
Hier ist der Code:
Beispiel
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Sie können auch elliptische Ecken erstellen:
Beispiel
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
CSS-Eigenschaften für abgerundete Ecken
| Property | Description |
|---|---|
| border-radius | A shorthand property for setting all the four border-*-*-radius properties |
| border-top-left-radius | Defines the shape of the border of the top-left corner |
| border-top-right-radius | Defines the shape of the border of the top-right corner |
| border-bottom-right-radius | Defines the shape of the border of the bottom-right corner |
| border-bottom-left-radius | Defines the shape of the border of the bottom-left corner |