Heim >Web-Frontend >CSS-Tutorial >Wie zeichnet man einen Kreis in CSS?
Wie zeichnet man einen Kreis in CSS?
- 醉折花枝作酒筹Original
- 2021-04-20 18:06:3410206Durchsuche
So zeichnen Sie einen Kreis mit CSS: Stellen Sie zunächst die Breite und Höhe des div-Elements auf den gleichen Wert ein. Verwenden Sie dann das Attribut „border-radius“, um einen Kreis zu zeichnen. Das Syntaxformat lautet „border-radius:50 %“. Die Eigenschaft border-radius legt die abgerundeten Ecken des äußeren Rands des Elements fest, der bei Verwendung eines Radius einen Kreis bestimmt.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Die Eigenschaft „border-radius“ ist eine Abkürzungseigenschaft zum Festlegen der vier Eigenschaften „border-*-radius“.
Tipp: Mit diesem Attribut können Sie abgerundete Ränder zu Elementen hinzufügen!
Hinweis: Stellen Sie die vier Werte der einzelnen Radien in dieser Reihenfolge ein. Wenn unten links weggelassen wird, ist es dasselbe wie oben rechts. Wenn unten rechts weggelassen wird, ist es dasselbe wie oben links. Wenn oben rechts weggelassen wird, ist es dasselbe wie oben links.
Vor dem Einstellen:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid rgb(255, 113, 113);
}
</style>
</head>
<body>
<div></div>
</body>
</html>Effekt:
Nach dem Einstellen:
border-radius: 50%;
Effekt:
Empfohlenes Lernen: css-Video-Tutorial
Das obige ist der detaillierte Inhalt vonWie zeichnet man einen Kreis in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!