Comment faire un cercle autour d'un contenu à l'aide de CSS ?

Question

Comme ceci

Avec seulement ce code

<span>1</span>

Answer 1

http://jsfiddle.net/MafjT/

Vous pouvez utiliser ce css

span {
    display: block;
    height: 60px;
    width: 60px;
    line-height: 60px;

    -moz-border-radius: 30px; /* or 50% */
    border-radius: 30px; /* or 50% */

    background-color: black;
    color: white;
    text-align: center;
    font-size: 2em;
}

Comme vous voulez un cercle, vous devez définir la même valeur pour la largeur, la hauteur et la hauteur de ligne (pour centrer le texte verticalement). Vous devez également utiliser la moitié de cette valeur pour le rayon de la bordure.

Cette solution rend toujours un cercle, quelle que soit la longueur du contenu.

---

Mais, si vous voulez une ellipse qui s'étend avec le contenu, alors http://jsfiddle.net/MafjT/256/

---

Redimensionner avec le contenu - Amélioration

Dans ce https://jsfiddle.net/36m7796q/2/ vous pouvez voir comment rendre un cercle qui réagit à un changement de la longueur du contenu.
Vous pouvez même modifier le contenu du dernier cercle, pour voir comment le diamètre change.

Answer 2

Utilisation de CSS3 :

span
{-moz-border-radius: 20px;
    border-radius: 20px;
border-color:black;
    background-color:black;
color:white;
    padding-left:15px;
    padding-right:15px;
    padding-top:10px;
    padding-bottom:10px;
    font-size:1.3em;
}

http://jsfiddle.net/NXZnq/

Answer 3

Vous avez beaucoup de réponses maintenant mais je vais essayer de vous donner les bases.

Le premier élément est un élément en ligne, donc en lui donnant une marge en haut, nous devons le convertir en élément de bloc. Je l'ai converti en élément inline-block car il est proche de l'élément inline et possède les caractéristiques des éléments block.

Deuxièmement, vous devez donner plus de padding à droite et à gauche qu'en haut et en bas, car les chiffres eux-mêmes s'étendent de haut en bas, ce qui leur donne une hauteur raisonnable, mais comme nous voulons que la portée soit RONDE, nous leur donnons plus de padding à gauche et à droite pour faire de la place pour le RADIUS DE LA BORDE.

Troisièmement, vous définissez le rayon de la bordure qui doit être supérieur à PADDING + la largeur du contenu lui-même, donc autour de 27px vous obtiendrez l'arrondi requis, mais pour couvrir en toute sécurité tous les chiffres, vous pouvez le définir à une valeur plus élevée.

Exemple pratique .

Answer 4

La propriété abrégée border-radius peut être utilisée pour définir les quatre coins simultanément. La propriété accepte une ou deux séries de valeurs, chacune consistant en une à quatre longueurs ou pourcentages.

La syntaxe :

[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

Exemples :

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px; 

Je suis votre cas

span {
    border-radius: 100px;
    background: #000;
    color : white;
    padding : 10px 15px;

}

Vérifiez cette démo http://jsfiddle.net/daWcc/

Answer 5

En plus des autres solutions, http://css3pie.com/ fait un excellent travail en tant que polyfill pour les anciennes versions d'internet explorer

EDIT : pas nécessaire à partir de 2016