Wie kann ich mit CSS Kreiszahlen erstellen?

Mit CSS kreisförmige Zahlen erstellen

Möchten Sie den optisch ansprechenden Effekt erzielen, Zahlen in Kreise einzuschließen? Dies lässt sich mühelos mit CSS bewerkstelligen. Lassen Sie uns untersuchen, wie:

Zuerst ist es wichtig, die Hintergrundfarbe für den Kreis festzulegen. Verwenden Sie die Eigenschaft „background“ mit dem Wert „#fff“, wie im Codeausschnitt in der Antwort dargestellt:

background: #fff;

Als nächstes ist es an der Zeit, die Kreisform mithilfe des „border-radius“ zu definieren ' Eigentum mit einem Wert von '50%'. Dadurch wird das Element perfekt rund:

border-radius: 50%;

Um die Größe des Kreises zu steuern, können Sie die Eigenschaften „Breite“ und „Höhe“ anpassen. Die folgenden Werte ergeben beispielsweise einen Kreis mit 36 ​​x 36 Pixeln:

width: 36px;
height: 36px;

Um einen Rahmen um den Kreis zu erstellen, legen Sie die Eigenschaft „Rahmen“ mit einer durchgezogenen Linie von 2 Pixeln fest. Passen Sie die Farbe mit der Eigenschaft „border-color“ an, wie im Snippet gezeigt:

border: 2px solid #666;

Zentrieren Sie abschließend die Zahl innerhalb des Kreises mit „text-align: center“ und formatieren Sie den Text mit „ Eigenschaften „Farbe“ und „Schriftart“. Sie können diese an Ihre Designvorlieben anpassen.

Hier ist ein Beispiel-HTML-Code, um die gestaltete Nummer in Ihre Webseite zu integrieren:

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

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