Wie man Div mit CSS rund macht

In CSS können Sie das Attribut „border-radius“ verwenden, um ein Div so festzulegen, dass es rund ist. Sie müssen dem div-Element lediglich den Stil „border-radius:50%“ hinzufügen. Mit dieser Eigenschaft können Sie dem Element abgerundete Ränder hinzufügen. Der Radius der abgerundeten Ecken darf die halbe Breite/Höhe nicht überschreiten.

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

Sie können Prozentsätze als Einheit für den abgerundeten Rand verwenden. Wenn Sie beispielsweise den abgerundeten Rand eines Quadrats auf 50 % festlegen, wird ein Kreis gebildet. Die Verwendung von Prozentsätzen und Pixeln ist jedoch nicht gleichwertig.

Hinweis: Sobald der Prozentsatz größer als 50 % ist, ändert sich die Form nicht mehr. Der Radius der Verrundung darf die Hälfte der Breite/Höhe nicht überschreiten

.box1{
width:200px;
height:200px;
margin: 30px auto;
border: 2px solid #e4007e;
text-align: center;
line-height: 200px;
font-weight: bold;
font-size: 24px;
background: burlywood;
border-radius: 50%;//圆角百分比
}

Der Effekt ist wie in der Abbildung dargestellt:

Empfohlenes Lernen:

CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWie man Div mit CSS rund macht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!