Wie erstelle ich kreisförmige Zahlenanzeigen mit CSS?

So stilisieren Sie numerische Werte mit Randradien

Das Einfügen kreisförmiger Ränder um numerische Werte erhöht die visuelle Attraktivität und Lesbarkeit. Um diesen Effekt mit CSS zu erzielen, führen Sie die folgenden Schritte aus:

Lösung:

1. Definieren Sie eine CSS-Klasse: Erstellen Sie eine CSS-Klasse mit dem Namen „numberCircle“, um den Stil zu kapseln.
2. Randradius festlegen: Anwenden von a Randradius von 50 %, um dem Element eine kreisförmige Form zu geben.
3. Abmessungen anpassen: Geben Sie Breite und Höhe an, um die Größe des Kreises zu steuern.
4. Abstand hinzufügen:Verwenden Sie Abstand, um Platz um die Zahl herum zu schaffen.
5. Konfigurieren Sie Hintergrund und Rand: Wählen Sie Hintergrund- und Randfarben entsprechend der gewünschten Ästhetik.
6. Zentrierter Text: Verwenden Sie text-align: center, um die Zahl innerhalb des Kreises zu positionieren.
7. Schriftart auswählen: Geben Sie die Schriftartfamilie und -größe an, die Ihren Wünschen entspricht Aussehen.

Beispielcode:

.numberCircle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 8px;

    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;

    font: 32px Arial, sans-serif;
}

HTML-Verwendung:

<div class="numberCircle">30</div>

Das obige ist der detaillierte Inhalt vonWie erstelle ich kreisförmige Zahlenanzeigen mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!