Heim  >  Artikel  >  Web-Frontend  >  Wie man mit CSS ein Quadrat in einen Kreis umwandelt

Wie man mit CSS ein Quadrat in einen Kreis umwandelt

王林
王林Original
2020-11-16 11:43:544701Durchsuche

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.

Wie man mit CSS ein Quadrat in einen Kreis umwandelt

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:

Wie man mit CSS ein Quadrat in einen Kreis umwandelt

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

Wie man mit CSS ein Quadrat in einen Kreis umwandelt

Wie man mit CSS ein Quadrat in einen Kreis umwandelt

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

Wie man mit CSS ein Quadrat in einen Kreis umwandelt

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

Wie man mit CSS ein Quadrat in einen Kreis umwandelt

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Was bedeutet CSS-Hack?Nächster Artikel:Was bedeutet CSS-Hack?