Wie man mit CSS ein Quadrat in einen Kreis umwandelt

CSS-Methode zum Umwandeln eines Quadrats in einen Kreis: Sie können das Attribut „border-radius“ verwenden, z. B. [border-radius:150px]. Mit der Eigenschaft border-radius können wir abgerundete Ränder zu Elementen hinzufügen.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3, dieser Artikel gilt für alle Computermarken.

Attributeinführung: Das Attribut

border-radius ist ein zusammengesetztes Attribut, das bis zu vier Randradiusattribute angeben kann. Mit diesem Attribut können Sie einem Element einen abgerundeten Rand hinzufügen.

(Teilen von Lernvideos: CSS-Video-Tutorial)

Grammatik:

border-radius: 1-4 length|% / 1-4 length|%;

Code-Implementierung:

Erstellen Sie eine neue HTML-Datei, geben Sie das div-Tag in das Body-Tag ein und fügen Sie einen Klassennamen (Feld) hinzu div-Tag, wie im Bild gezeigt:

Fügen Sie ein CSS-Attribut zum Klassennamen (Feld) hinzu, um ihn in ein Quadrat umzuwandeln, wie im Bild gezeigt:

Fügen Sie ein CSS-Attribut hinzu , Code: border-radius :150px, wie im Bild gezeigt:

Führen Sie die Webseite aus. Sie können sehen, dass sich das Quadrat in einen Kreis verwandelt hat, wie im Bild gezeigt:

Verwandte Empfehlungen : CSS-Tutorial

Das obige ist der detaillierte Inhalt vonWie man mit CSS ein Quadrat in einen Kreis umwandelt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!