Comment puis-je créer un badge numéro circulaire en utilisant uniquement CSS ?

Encadrer un nombre dans un cercle avec CSS

Question :

Le CSS peut-il être utilisé pour entourer un nombre dans un cercle, comme le démontre l'image fournie ?

[Image d'un nombre entouré d'un cercle]

Réponse :

Oui, il est possible d'obtenir cet effet visuel en utilisant CSS.

Mise en œuvre :

1. Définir le .numberCircle Classe :

.numberCircle {
    border-radius: 50%;  /* Create a circular shape */
    width: 36px;  /* Set the width */
    height: 36px;  /* Set the height */
    padding: 8px;  /* Provide padding for the text */

    background: #fff;  /* Set a white background */
    border: 2px solid #666;  /* Add a gray border */
    color: #666;  /* Set the font color to gray */
    text-align: center;  /* Center the text horizontally */

    font: 32px Arial, sans-serif;  /* Define the font and size */
}

2. Utilisez la classe .numberCircle :

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

Cette classe CSS et ce code HTML générera un nombre entouré d'un cercle, comme on le voit dans l'image originale. Vous pouvez personnaliser l'apparence en ajustant des valeurs telles que la largeur, la hauteur, la couleur et la police.

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!