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!