Heim >Web-Frontend >CSS-Tutorial >So ändern Sie ein Div mit CSS in einen Kreis
So ändern Sie ein Div mit CSS in einen Kreis
- 藏色散人Original
- 2020-12-30 09:23:583948Durchsuche
So ändern Sie ein Div mit CSS in einen Kreis: Erstellen Sie zunächst eine neue HTML-Datei und geben Sie dann „1331fce85752e1268a1f748c03848cfe16b28748ea4df4d9c2150843fecfba68“ ein die Kopftabelle. Und fügen Sie das Attribut „border-radius“ hinzu.
Die Betriebsumgebung dieses Tutorials: Dell G3-Computer, Windows 7-System, HTML5- und CSS3-Version.
Empfohlen: „CSS-Video-Tutorial“
CSS, um div in einen Kreis zu ändern
1. Öffnen Sie den Code-Editor, erstellen Sie eine neue HTML-Datei und schreiben Sie die Grundstruktur
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>2 Body-Tag:1331fce85752e1268a1f748c03848cfe16b28748ea4df4d9c2150843fecfba68, das Div hier ist die Beschriftung, die zum Zeichnen eines Kreises verwendet wird. (Empfohlenes Lernen: CSS-Video-Tutorial)
<body>
<div class="circle"></div>
</body>3. Fügen Sie das Style-Tag in die Kopftabelle ein und geben Sie den folgenden Code ein:
<style>
.circle{
width: 200px;
height: 200px;
border-radius: 100px;
background-color: #1EFD0C;
}
</style>5. Speichern Sie den Code und öffnen Sie den Browser, um den Kreis anzuzeigen.
Implementierungsprinzip: Stellen Sie die Breite und Höhe gleich ein und stellen Sie dann die abgerundeten Ecken auf die Hälfte der Breite und Höhe ein. Eine bequemere Möglichkeit besteht darin, die abgerundeten Ecken direkt auf 50 % festzulegen.
Das obige ist der detaillierte Inhalt vonSo ändern Sie ein Div mit CSS in einen Kreis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!