Sto provando a creare un cerchio con un contorno con margini.
Tutto sembra funzionare, ma non riesco a ottenere quel poco di margine px.
Qualche suggerimento, per favore?css - cerchia con margine sul bordo
.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 il mio violino: http://jsfiddle.net/nalagg/K6pdr/
direi per trattare in questo modo:
esterno "confine" - utilizzare una scatola di ombra
interno "margine" - utilizzare un bordo bianco
interno zona - colore di sfondo uso
Tutti insieme si ottiene:
.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>In alternativa, è possibile utilizzare un secondo 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>Il bordo esterno è piuttosto debole. C'è un modo per renderlo un po 'più visibile? edit: necessario uno zero in più 'box-shadow: 0 0 0 3px #fff;' – adamj
Prova 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 imbottitura interna:
.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; }
Vedi anche su t il suo violino è la differenza quando si utilizzano le proprietà CSS rispetto al margine rispetto al riempimento.
non vedo uno spazio tra lo sfondo e il tratto come l'immagine nel mio post –
Ho aggiornato il mio violino .. vederlo ora? http://jsfiddle.net/MQx7r/4/ –
[ci si avvicina nel modo sbagliato; non è un margine, è un confine] (http://codepen.io/zzzzBov/pen/bEpdL). – zzzzBov