Was bedeutet Radius in CSS?

In CSS wird die Radiuseigenschaft verwendet, um den Radius der Ecken eines Elements festzulegen, um ein schöneres, moderneres Aussehen zu erzielen. Eigenschaftswerte enthalten absolute Längen oder Prozentsätze oder erben den Radius des übergeordneten Elements. Die Angabe eines Werts wirkt sich auf alle vier Ecken aus, die Angabe von zwei Werten wirkt sich auf die Radien der oberen linken und unteren rechten Ecke bzw. der oberen rechten und unteren linken Ecke aus. Das Radius-Attribut wird von allen modernen Browsern weitgehend unterstützt.

Was bedeutet Radius in CSS?

Radius ist eine Eigenschaft in CSS, die es Entwicklern ermöglicht, die Ecken von Elementen abzurunden. Es erzeugt abgerundete Ränder für Elemente, wodurch diese schöner und moderner aussehen.

Wie verwende ich den Radius? Das Attribut

radius akzeptiert einen oder zwei Werte:

• Einzelwert: Wenn nur ein Wert angegeben wird, wird dieser auf alle vier Ecken des Elements angewendet.
• Zwei Werte: Der erste Wert gilt für die obere linke und untere rechte Ecke, während der zweite Wert für die obere rechte und untere linke Ecke gilt.

Syntax:

element {
  border-radius: <值>;
}

• <值> kann einer der folgenden Werte sein:

  • Absolute Längenwert (z. B. "10px" oder "1EM")
  • percentage -Wert (z. B. "20%")
  • Schlüsselwort „erben“ (den gerundeten Wert des übergeordneten Elements erben)

Beispiel:

Um alle vier Eckradien auf 10 Pixel festzulegen, verwenden Sie den folgenden Code:

.element {
  border-radius: 10px;
}

Um die obere linke und rechte Ecke festzulegen Um den Radius der unteren Ecke auf 20 Pixel und der oberen rechten und unteren linken Ecke auf 10 Pixel festzulegen, verwenden Sie den folgenden Code:

.element {
  border-radius: 20px 10px;
}

Unterstützte Browser:

Das Radiusattribut wird in allen modernen Browsern weitgehend unterstützt, einschließlich Chrome, Firefox, Safari, Edge und Opera.

Das obige ist der detaillierte Inhalt vonWas bedeutet Radius in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!