CSS-Rundungen

CSS-Rundungen

Durch CSS border-radius Eigenschaften, die es ermöglichen, jeden Element eine "Abgerundete Ecke"-Stil zu implementieren.

CSS border-radius Eigenschaft

CSS border-radius Die Eigenschaft definiert den Radius der Ecken des Elements.

Hinweis:Sie können diese Eigenschaft verwenden, um Elementen abgerundete Ecken hinzuzufügen!

Hier gibt es drei Beispiele:

1. Eckenabgerundungen von Elementen mit angegebenem Hintergrundfarbe:

Abgerundete Ecken!

2. Eckenabgerundungen von Elementen mit Rahmen:

Abgerundete Ecken!

3. Eckenabgerundungen von Elementen mit Hintergrundbild:

Abgerundete Ecken!

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

Hinweis: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;（Abfolge: Obere linke Ecke, Obere rechte Ecke, Untere rechte Ecke, Untere linke Ecke）：

Drei Werte - border-radius: 15px 50px 30px;（Erster Wert für die obere linke Ecke, zweiter Wert für die obere rechte und untere linke Ecke, dritter für die untere rechte Ecke）：

Zwei Werte - border-radius: 15px 50px;（Erster Wert für die oberen linken und unteren rechten Ecken, zweiter Wert für die oberen rechten und unteren linken Ecken）：

Ein Wert - border-radius: 15px;（Dieser Wert wird für alle vier Ecken verwendet, die Eckenabgerundungen 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 Eckenabgerundungen 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 Eckenabgerundungseigenschaft

Eigenschaft Beschreibung
border-radius Kurzform der Eigenschaft, um alle vier border-*-*-radius-Eigenschaften zu setzen.
border-top-left-radius Form des linken oberen Rands definieren.
border-top-right-radius Form des rechten oberen Rands definieren.
border-bottom-right-radius Form des rechten unteren Rands definieren.
border-bottom-left-radius Form des linken unteren Rands definieren.