web-dev-qa-db-fra.com

Comment faire un cercle autour du contenu en utilisant CSS?

Comme ça

circle around content

Avec seulement ce code

<span>1</span>
csscss-shapes
59
Jitendra Vyas

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

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

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

Mais si vous voulez une ellipse qui se développe avec le contenu, alors http://jsfiddle.net/MafjT/256/

Redimensionner avec contenu - Amélioration

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

95
Jose Rui Santos

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/

6
Curt

Vous avez beaucoup de réponses maintenant mais j'essaie de vous expliquer les bases.

Le premier élément est un élément en ligne, il est donc nécessaire de le convertir en élément bloc en lui donnant une marge. Je me suis converti en inline-block car il est proche de inline et possède des fonctionnalités d'éléments de bloc.

Deuxièmement, vous devez donner plus de rembourrage à droite et à gauche que le haut et le bas, car les chiffres s’étendent de haut en bas pour obtenir une hauteur raisonnable MAIS nous voulons que la portée soit ROND de sorte que nous leur donnions davantage de rembourrage à gauche et à droite pour faire de la place. pour BORDER RADIUS.

Troisièmement, vous définissez border-radius qui doit être supérieur à PADDING + width, de sorte que vous obtiendrez l'arrondi requis autour de 27px, mais vous pouvez définir une valeur plus élevée pour couvrir tous les chiffres en toute sécurité.

Exemple pratique .

6
Shawn Taylor

La propriété shorthand-border-radius peut être utilisée pour définir simultanément les quatre coins. La propriété accepte un ou deux ensembles 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;

I votre cas 

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


}

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

4
Rupesh Pawar

Outre les 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

0
Urs