Comment créer des affichages de numéros circulaires avec CSS ?

Comment styliser des valeurs numériques avec des rayons de bordure

L'intégration de bordures circulaires autour des valeurs numériques améliore l'attrait visuel et la lisibilité. Pour obtenir cet effet en utilisant CSS, implémentez les étapes suivantes :

Solution :

1. Définir une classe CSS : Créer une classe CSS nommé "numberCircle" pour encapsuler le style.
2. Définir le rayon de bordure : Appliquer un rayon de bordure de 50 % pour donner à l'élément une forme circulaire.
3. Ajuster les dimensions : Spécifiez la largeur et la hauteur pour contrôler la taille du cercle.
4. Ajouter un remplissage : Utilisez un remplissage pour créer un espace autour du numéro.
5. Configurez l'arrière-plan et Bordure : Choisissez les couleurs d'arrière-plan et de bordure en fonction de l'esthétique souhaitée.
6. Centrer le texte : Utilisez text-align: center pour positionner le numéro dans le cercle.
7. Sélectionnez la police : Spécifiez la famille et la taille de la police en fonction de celle souhaitée. apparence.

Exemple de code :

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

Utilisation HTML :

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

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!