css - cercle avec marge sur la bordure

J'essaie de créer un cercle avec un contour qui a une marge.
Tout semble fonctionner, sauf que je ne peux pas sembler obtenir que peu de marge de px là-bas.
Des suggestions s'il vous plaît?css - cercle avec marge sur la bordure

enter image description here

.ui-corner-all { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; border: 1px solid black; margin:5px; width:30px; height:30px;}

Heres mon violon: http://jsfiddle.net/nalagg/K6pdr/

Source

2012-10-12 t q

[Vous vous approchez de ce dans le mauvais sens; ce n'est pas une marge, c'est une frontière] (http://codepen.io/zzzzBov/pen/bEpdL). – zzzzBov

Je dirais que de le traiter comme ceci:

extérieur « frontière » - utiliser une ombre boîte
intérieure « marge » - utiliser une bordure blanche
zone intérieure - Utiliser la couleur d'arrière-plan

tous ensemble, vous obtenez:

.circle { 
 
    background-color: #F80; 
 
    border: 3px solid #FFF; 
 
    border-radius: 18px; 
 
    box-shadow: 0 0 2px #888; 
 
    height: 30px; 
 
    width: 30px; 
 
}

<div class="circle"></div>

Comme alternative, vous pouvez utiliser un deuxième élément:

.circle { 
 
    border: 1px solid #CCC; 
 
    border-radius: 19px; 
 
    display: inline-block; 
 
} 
 

 
.inner { 
 
    background-color: #F80; 
 
    border-radius: 15px; 
 
    margin: 3px; 
 
    height: 30px; 
 
    width: 30px; 
 
}

<div class="circle"> 
 
    <div class="inner"></div> 
 
</div>

Source

2012-10-12 19:12:52 zzzzBov

La bordure extérieure est assez faible. Y a-t-il un moyen de le rendre un peu plus visible? edit: besoin d'un zéro supplémentaire là-dedans 'box-shadow: 0 0 0 3px #fff;' – adamj

Essayez avec:

.ui-corner-all { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; border: 1px solid black; margin: 2px; background: #fcc; width: 30px; height: 30px; }

Ou avec rembourrage intérieur:

.ui-corner-all2 { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; border: 1px solid black; padding: 2px; background: #fcc; width: 30px; height: 30px; }

Voir aussi sur t son violon la différence lors de l'utilisation de la marge par rapport aux propriétés CSS padding.

http://jsfiddle.net/MQx7r/4/

Source

2012-10-12 19:09:24

je ne vois pas un écart entre l'arrière-plan et le coup comme l'image dans mon poste –

J'ai mis à jour mon violon .. le voir maintenant? http://jsfiddle.net/MQx7r/4/ –

Vous pouvez utiliser outline en combinaison avec outline-radius. Cochez cette case jsFiddle.

Source

2012-10-12 19:10:39 Simone

Seul firefox supporte le rayon du contour. – zzzzBov

css - cercle avec marge sur la bordure

Répondre

Questions connexes