Wie kann ich mit CSS kreisförmige Zahlenhintergründe erstellen?-CSS-Tutorial-php.cn

Wie kann ich mit CSS kreisförmige Zahlenhintergründe erstellen?

Linda Hamilton

Freigeben： 2024-12-18 18:58:11

Original

272 Leute haben es durchsucht

How Can I Create Circular Number Backgrounds Using CSS?

Umgeben von Zahlen mit kreisförmigen Hintergründen mithilfe von CSS

Mit der Leistungsfähigkeit von CSS lässt sich die visuelle Attraktivität von Zahlen durch Einschließen in kreisförmige Hintergründe mühelos verbessern. Befolgen Sie diese Schritte, um dies zu erreichen:

Erstellen Sie in Ihrer CSS-Datei eine Klasse mit den folgenden Eigenschaften:

.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;
}

Nach dem Login kopieren

In Ihrer HTML-Datei schließen Sie die Zahl in ein

ein. Element und wenden Sie die Klasse .numberCircle an.

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

Nach dem Login kopieren

Dadurch wird die Zahl mit einem kreisförmigen Hintergrund umgeben, wie im bereitgestellten Bild gezeigt. Passen Sie die CSS-Eigenschaften nach Bedarf an, um das Erscheinungsbild des Kreises und der darin enthaltenen Zahl anzupassen.

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