Heim > Artikel > Web-Frontend > Wie CSS verschiedene Formen implementiert
So implementieren Sie verschiedene Formen mit CSS: 1. Stellen Sie für einen Kreis beim Festlegen von CSS die Breite und Höhe gleich ein und setzen Sie dann das Attribut [border-radius] auf die halbe Breite oder Höhe. 2. Quadrat ist das einfachste CSS-Grafik Eine der Grafiken verwendet auch ein div und legt eine ID fest.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, DELL G3-Computer.
So implementieren Sie verschiedene Formen mit CSS:
1. Kreis
Um mit CSS einen Kreis zu erstellen, benötigen wir ein Div mit einer darauf festgelegten ID.
<div id="circle"></div>
Stellen Sie für einen Kreis beim Festlegen von CSS die Breite und Höhe gleich ein und stellen Sie dann die Eigenschaft border-radius auf die halbe Breite oder Höhe ein:
#circle { width: 120px; height: 120px; background: #7fee1d; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px; }
2. Quadrat
Das Quadrat ist die einfachste Form Unter den CSS-Grafiken verwendet man auch ein Div und legt eine ID fest.
<div id="square"></div>
Der CSS-Stil muss nur die gleiche Breite und Höhe festlegen.
#square { width: 120px; height: 120px; background: #f447ff; }
Verwandte Tutorial-Empfehlungen: CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonWie CSS verschiedene Formen implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!