5 Möglichkeiten, einen CSS-Kreis zu implementieren (Zusammenfassung)

Dieser Artikel stellt hauptsächlich 5 Methoden (Zusammenfassung) zur Implementierung von CSS-Kreisen vor. Ich hoffe, dass er für Freunde hilfreich ist.

Mir fiel ein, dass ich bei meinem Praktikumsinterview letztes Jahr nach dem Praktikumskreis gefragt wurde, also habe ich beschlossen, einen Artikel zu schreiben, um alles zusammenzufassen! Zusammenfassend gibt es etwa 5 Methoden.

1. Verschachtelung von zwei Tags:

<p class="element1">
    <p class="child1"></p>
</p>

rrree

2

.element1{
            width: 200px;
            height: 200px;
            background-color: lightpink;
            border-radius: 50%;
        }
        .child1{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #009966;
            position: relative;
            top: 50px;
            left: 50px;
        }

<p class="element2"></p>

3. Verwenden Sie den Rand:

.element2{
            width: 200px;
            height: 200px;
            background-color: lightpink;
            border-radius: 50%;
        }
        .element2:after{
            content: "";
            display: block;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #009966;
            position: relative;
            top: 50px;
            left: 50px;
        }

<p class="element3"></p>

4. Verwenden Sie den Randschatten

 .element3{
            width: 100px;
            height: 100px;
            background-color: #009966;
            border-radius: 50%;
            border: 50px solid lightpink ;
        }

<p class="element4"></p>

.element4{
            width: 100px;
            height: 100px;
            background-color: #009966;
            border-radius: 50%;
            box-shadow: 0 0 0 50px lightpink ;
            margin: auto;
        }

<p class="element5">

5. Verwenden Sie den Radialgradienten

  .element5{
            width: 200px;
            height: 200px;
            background-color: #009966;
            border-radius: 50%;
            box-shadow: 0 0 0 50px lightpink inset;
            margin: auto;
        }

<p class="element6"></p>

Wenn Sie andere Methoden haben, sagen Sie es mir bitte, danke! ! !

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter CSS-Video-Tutorial !

Verwandte Empfehlungen:

PHP-Video-Tutorial zur öffentlichen Wohlfahrtsschulung

CSS-Online-Handbuch

Div/CSS-Grafik-Tutorial

Das obige ist der detaillierte Inhalt von5 Möglichkeiten, einen CSS-Kreis zu implementieren (Zusammenfassung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!