css - koło z marginesem na granicy

Question

Próbuję utworzyć okrąg z konturem, który ma margines.
Wszystko wydaje się działać, ale nie mogę znaleźć tam kilku takich marginesów.
Wszelkie sugestie proszę?

.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 moje skrzypce: http://jsfiddle.net/nalagg/K6pdr/

Answer 1

Powiedziałbym traktować go tak:

zewnętrzny „granicę” - użyj pudełko cień
wewnętrzny „margines” - użyj białą obwódkę
Wewnętrzna powierzchnia - użycie koloru tła

wszystko razem otrzymasz:

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

---

Jako alternatywę, można użyć drugiego elementu:

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

Answer 2

Spróbuj z:

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

Albo z wewnętrzną wyściółką:

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

Zobacz również na t jego skrzypce różnią się, gdy używamy właściwości CSS z marginesem lub padding.

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

Answer 3

Można użyć outline w połączeniu z outline-radius. Sprawdź to jsFiddle.