Wie man in CSS einen runden Kuchen erstellt und ihn mit Farbe füllt

Methode: 1. Fügen Sie dem Element den Stil „Breite: Durchmesserwert; Höhe: Durchmesserwert“ hinzu, um ein Quadrat zu erstellen. 2. Fügen Sie dem Element den Stil „Rahmenradius: 50 %“ hinzu, um die quadratischen abgerundeten Ecken festzulegen um daraus einen Kreis zu machen; 3. Fügen Sie dem Element den Stil „Hintergrund: Farbwert“ hinzu und füllen Sie den Kreis mit Farbe.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

So erstellen Sie einen runden Kuchen in CSS und füllen ihn mit Farbe

1. Wir erstellen eine neue HTML-Webseitendatei und nennen sie test.html, um zu erklären, wie um css3 zu implementieren Ein kreisförmiger Mustereffekt.

Verwenden Sie in der Datei test.html div-Tags. Fügen Sie dem div-Tag einen Stil hinzu und setzen Sie das Klassenattribut des div-Tags auf mybkkd.

Schreiben Sie den CSS-Stil und der mybkkd-Stil wird in den Tag geschrieben.

Verwenden Sie im CSS-Tag das Klassenattribut mybkkd des div-Tags, um einen kreisförmigen Mustereffekt zu erzielen.

2. Im CSS-Stil-Tag legt das div von mybkkd den CSS-Attributstil auf fest, die Breiten- und Höhenattribute werden auf denselben Wert gesetzt, um den Durchmesser und die Länge des Kreises darzustellen, und Das Attribut „border-radius“ wird zum Festlegen der Kreisecke verwendet. Bei 50 % ist die Grafik mit abgerundeten Ecken genau kreisförmig, und das Attribut „background“ wird zum Festlegen der Farbe des Kreises verwendet.

width: 100px;
height: 100px;
background: red;
border-radius: 50%

Durchsuchen Sie test.html im Browser, um zu sehen, ob der Effekt erzielt werden kann.

Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonWie man in CSS einen runden Kuchen erstellt und ihn mit Farbe füllt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!