CSS-Rundungen

CSS-Rundungen

Durch CSS border-radius Eigenschaften, die jedes Element ein 'Abgerundete Ecken'-Stil implementieren können.

CSS border-radius Eigenschaft

CSS border-radius Die Eigenschaft definiert den Radius der Elementecke.

Tipp:Sie können diese Eigenschaft verwenden, um Elementen Eckenabrundungen hinzuzufügen!

Hier gibt es drei Beispiele:

1. Eckenabrundung von Elementen mit angegebenem Hintergrundfarbe:

Eckenabrundung!

2. Eckenabrundung von Elementen mit Rahmen:

Eckenabrundung!

3. Eckenabrundung von Elementen mit Hintergrundbild:

Eckenabrundung!

Dies 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; 
}

Versuchen Sie es selbst

Tipp:border-radius Die Eigenschaft ist tatsächlich eine Kurzform der folgenden Eigenschaften:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

CSS border-radius - Bestimmung jeder Ecke

border-radius Die Eigenschaft kann einen bis vier Werte akzeptieren. Die Regeln lauten wie folgt:

Vier Werte - border-radius: 15px 50px 30px 5px;(Wird in der folgenden Reihenfolge verwendet: obere linke Ecke, obere rechte Ecke, untere rechte Ecke, untere linke Ecke):

Drei Werte - border-radius: 15px 50px 30px;(Der erste Wert wird für die obere linke Ecke verwendet, der zweite für die obere rechte und untere linke Ecke, der dritte für die untere rechte Ecke):

Zwei Werte - border-radius: 15px 50px;(Der erste Wert wird für die oberen linken und unteren rechten Ecken verwendet, der zweite für die oberen rechten und unteren linken Ecken):

Ein Wert - border-radius: 15px;(Dieser Wert wird für alle vier Ecken verwendet, die Eckenabrundungen sind gleich):

Dies 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; 
}

Versuchen Sie es selbst

Sie können auch Eckenabrundungen für Ellipsen 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;
}

Versuchen Sie es selbst

CSS Eckenabrundungseigenschaft

Eigenschaft Beschreibung
border-radius Kurzform für die Einstellung aller vier border-*-*-radius-Eigenschaften.
border-top-left-radius Formgebung des linken oberen Randes.
border-top-right-radius Formgebung des rechten oberen Randes.
border-bottom-right-radius Formgebung des rechten unteren Randes.
border-bottom-left-radius Formgebung des linken unteren Randes.