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

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

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>

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!

css html using class number this background

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn