2012-10-12 90 views
6

Estoy tratando de crear un círculo con un contorno que tenga margen.
Todo parece funcionar, excepto que no puedo obtener esos pocos px de margen allí.
¿Alguna sugerencia por favor?css - círculo con margen en el borde

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 mi violín: http://jsfiddle.net/nalagg/K6pdr/

+0

[te estás acercando a mal; eso no es un margen, eso es un borde] (http://codepen.io/zzzzBov/pen/bEpdL). – zzzzBov

Respuesta

29

diría que tratarlo como esto:

exterior "frontera" - utilizar una caja de sombra
interior "margen" - usar un borde blanco
zona interior - el uso color de fondo

En conjunto se obtiene:

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


Como alternativa, se puede utilizar un segundo elemento:

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

+1

El borde exterior es bastante débil. ¿Hay alguna manera de hacerlo un poco más visible? editar: necesitaba un cero adicional allí 'box-shadow: 0 0 0 3px #fff;' – adamj

1

intento con:

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

O con relleno interno:

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

Ver también en t su violín es la diferencia cuando se usa el margen frente a las propiedades de relleno de CSS.

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

+0

no veo un espacio entre el fondo y el trazo como la imagen en mi publicación –

+0

He actualizado mi violín ... ¿lo ve ahora? http://jsfiddle.net/MQx7r/4/ –

1

Se puede utilizar en combinación con outlineoutline-radius. Compruebe esto jsFiddle.

+1

Solo Firefox admite radio de contorno. – zzzzBov

Cuestiones relacionadas