So erreichen Sie abgerundete Ränder mit CSS

Um abgerundete Ränder zu erreichen, muss CSS die Eigenschaft border-radius in CSS verwenden. Werfen wir einen Blick auf die Details von CSS, um abgerundete Ränder zu implementieren.

Werfen wir einen Blick auf den Implementierungscode eines Rahmens ohne abgerundete Ecken

<div style="border:solid 4px #808080;">这是一个框架</div>

Der Effekt ist wie folgt:

Machen wir es als nächstes. Schauen wir uns speziell den Code an, der das Attribut „border-radius“ in CSS verwendet, um abgerundete Ränder zu implementieren.

Schauen wir uns zunächst das Syntaxformat des Attributs „border-radius“ an:

brder-radius:（左上水平半径）（右上水平半径）（右下水平半径）（左下水平半径）/（左上垂直半径）（右上垂直半径）（右下垂直半径）（左下垂直半径）;

Wenn / weggelassen wird, wird davon ausgegangen, dass es horizontal ist und in beiden Richtungen und in vertikaler Richtung den gleichen Radius hat.

brder-radius:(左上半径）（右上半径）（右下半径）（左下半径）;

Codebeispiel 1:

<div style="height:75px; padding-top:25px; border:solid 4px #808080;
  border-radius: 25px 25px 25px 25px / 25px 25px 25px 25px;">这是一个圆角边框</div>

Der Effekt ist wie folgt:

Codebeispiel 2

<div style="height:75px; padding-top:25px; border:solid 4px #808080;
  border-radius: 100px 100px 1005px 1005px / 25px 25px 25px 25px;">圆角边框</div>

Wirkung wie folgt:

Codebeispiel 3

<div style="height:75px; padding-top:25px; padding-left:16px; border:solid 4px #808080;
  border-radius: 50px 20px 20px 20px;">圆角边框</div>

Die Wirkung ist wie folgt:

Eckenradius individuell angeben

border-top-left-radius

border-top-rightr-radius

border-bottom-left-radius

border-bottom-right-radius

Sie können den Radius jeder Ecke auch einzeln angeben. Das Format ist

border-top-left-radius (角的半径)

oder

border-top-left-radius (角的水平半径) (角的垂直半径)

Das obige ist der detaillierte Inhalt vonSo erreichen Sie abgerundete Ränder mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!