Wie erstellt das Festlegen von Breite und Höhe auf 0, einer großen Rahmenbreite und einem passenden Rahmenradius einen Kreis in CSS?

Wie erzeugt dieses CSS einen Kreis?

Lassen Sie uns zunächst das CSS aufschlüsseln:

div {<br> width: 0;<br> Höhe: 0;<br> Rand: 180 Pixel durchgehend rot;<br> Randradius: 180 Pixel;<br>}<br>

• width und height sind beide auf 0 gesetzt, was bedeutet, dass das Element keine hat Inhalt.


• border ist auf 180 Pixel festes Rot eingestellt, was bedeutet, dass das Element einen roten Rand mit einer Breite von 180 Pixeln hat.


• border -radius ist auf 180 Pixel eingestellt, was bedeutet, dass die Ecken des Rahmens auf einen Radius von 180 abgerundet werden Pixel.

Lassen Sie uns nun darüber nachdenken, wie diese Eigenschaften zusammenarbeiten, um einen Kreis zu erstellen.

Wo liegen Breite und Höhe gilt tatsächlich?

Die Eigenschaften width und height gelten für Inhalt eines Elements, nicht bis zum Rand. Da das Element in diesem Fall keinen Inhalt hat, haben die Eigenschaften width und height keine Auswirkung.

Wo gilt border-radius?

Die Eigenschaft border-radius gilt für den Rand eines Elements. Damit können Sie die Ecken der Umrandung auf einen bestimmten Radius abrunden. In diesem Fall ist die Eigenschaft „Rahmenradius“ auf 180 Pixel festgelegt, was bedeutet, dass die Ecken des Rahmens auf einen Radius von 180 Pixel abgerundet werden.

Was bedeutet das? für unseren Randradius/Kreis?

Wenn Sie den Rand und kombinieren Mit den Eigenschaften des Randradius können Sie einen Kreis erstellen. Die Eigenschaft „border“ erstellt einen rechteckigen Rahmen um das Element und die Eigenschaft „border-radius“ rundet die Ecken des Rahmens auf einen angegebenen Radius ab. In diesem Fall ist die Eigenschaft „Rahmenradius“ auf 180 Pixel festgelegt, was bedeutet, dass die Ecken des Rahmens auf einen Radius von 180 Pixel abgerundet werden. Dadurch wird ein Kreis erstellt.

Hier ist ein Diagramm, das zeigt, wie die CSS-Regeln im Beispiel zusammenarbeiten, um einen Kreis zu erstellen:

Im Diagramm ist der tatsächliche Inhalt Ihres Elements (der kleine schwarze Punkt) wirklich nicht vorhanden. Wenn Sie keinen Randradius anwenden, erhalten Sie das grüne Kästchen. Der Randradius ergibt den blauen Kreis.

Weitere Ressourcen

• W3C: CSS-Hintergründe und Rahmenmodul Level 3 (insbesondere 5. Abgerundete Ecken)


• Demonstration

Das obige ist der detaillierte Inhalt vonWie erstellt das Festlegen von Breite und Höhe auf 0, einer großen Rahmenbreite und einem passenden Rahmenradius einen Kreis in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!