Zeichnen Sie einen Kreis mit reinem CSS (Codebeispiel)

In diesem Artikel wird anhand von Codebeispielen erläutert, wie man mit reinem CSS einen Kreis zeichnet. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Die Idee, einen Kreis zu zeichnen, ist sehr einfach: Zeichnen Sie zuerst zwei Kreise und legen Sie unterschiedliche Hintergrundfarben fest.

Schwierigkeitsfaktor

☆☆

HTML

<div class="container">
    <span class="ring-style"></span>
</div>

Parsing:

• Hier gibt es einen übergeordneten Container

CSS

.container {
    position: relative;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background-color: lightgrey;
}
.ring-style {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: blue;
    width: 260px;
    height: 260px;
    border-radius: 260px;
}
.ring-style::before {
    content: ' ';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    width: 200px;
    height: 200px;
    border-radius: 200px;
}

Parsing:

• Breite, Höhe und Rundung festlegen Ecken des Elements Der Effekt besteht darin, einen Kreis zu zeichnen
• Erstellen Sie zwei Kreise durch das ::before-Pseudoelement und das Ontologieelement
• Indem Sie die Attribute „oben“, „links“ und „übersetzen“ basierend auf der absoluten Positionierung des übergeordneten Containers festlegen, Die Elemente können horizontal oder vertikal basierend auf dem übergeordneten Container ausgerichtet werden, damit die Mittelpunkte der beiden Kreise zusammenfallen Punkte

Grenzradius

Das Element ist horizontal und vertikal zentriert

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideo

Das obige ist der detaillierte Inhalt vonZeichnen Sie einen Kreis mit reinem CSS (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!