Was stellt jeder Wert der CSS3-Eigenschaft „Abgerundete Ecken' dar?

In CSS3 hat das Attribut „border-radius“ mit abgerundeten Ecken 1 bis 4 Attributwerte. Wenn vier Attributwerte festgelegt sind, stellen die Attributwerte die abgerundeten Attributwerte der oberen linken Ecke dar Ecke, untere rechte Ecke und untere linke Ecke, die Syntax lautet „Randradius: oberer linker gerundeter Wert, oberer rechter gerundeter Wert, unterer rechter gerundeter Wert, unterer linker gerundeter Wert“.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

Was stellt jeder Wert der CSS3-Eigenschaft für abgerundete Ecken dar?

CSS3-Randradius – Gibt jede abgerundete Ecke an.

Die Eigenschaft „Grenzradius“ ist eine zusammengesetzte Eigenschaft, die bis zu vier Eigenschaften für den Randradius angeben kann

Wenn Sie im Attribut border-radius nur einen Wert angeben, werden 4 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 und der dritte Der Wert ist die untere Ecke der rechten Ecke, 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: Der erste Wert ist die obere linke Ecke Ecke und die untere rechte Ecke, der zweite Wert ist die obere rechte Ecke und die untere linke Ecke

· Ein Wert: Die vier Verrundungswerte sind gleich

Die Reihenfolge der vier Werte für jeden Radius ist: obere linke Ecke, obere rechte Ecke, untere rechte Ecke, untere linke Ecke. Wenn die untere linke Ecke weggelassen wird, ist die obere rechte Ecke dieselbe. Wenn die untere rechte Ecke weggelassen wird, ist die obere linke Ecke dieselbe. Wenn die obere rechte Ecke weggelassen wird, ist die obere linke Ecke dieselbe.

Beispiel 1

border-radius:2em;

entspricht:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

Beispiel 2

border-radius: 2em 1em 4em / 0.5em 3em;

entspricht:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWas stellt jeder Wert der CSS3-Eigenschaft „Abgerundete Ecken' dar?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!