Comment puis-je créer des arrière-plans de nombres circulaires à l'aide de CSS ?

Entourer des nombres avec des arrière-plans circulaires à l'aide de CSS

Améliorer l'attrait visuel des nombres en les enfermant dans des arrière-plans circulaires peut être réalisé sans effort grâce à la puissance du CSS. Suivez ces étapes pour y parvenir :

Dans votre fichier CSS, créez une classe avec les propriétés suivantes :

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

Dans votre fichier HTML, enveloppez le numéro dans un

et appliquez la classe .numberCircle.

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

Cela entourera le nombre avec un arrière-plan circulaire, comme indiqué dans l'image fournie. Ajustez les propriétés CSS si nécessaire pour personnaliser l'apparence du cercle et le numéro qu'il contient.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html using class number this background

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn