css - Kreis mit Rand am Rand

Ich versuche einen Kreis mit einem Umriss zu erstellen, der Rand hat.
Alles scheint zu funktionieren, außer ich kann nicht scheinen, dass die wenigen px Marge in dort.
Irgendwelche Vorschläge bitte?css - Kreis mit Rand am Rand

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

heren meine Geige: http://jsfiddle.net/nalagg/K6pdr/

Quelle

2012-10-12 t q

[Du dies der falsche Weg nähern; das ist kein Rand, das ist ein Rand] (http://codepen.io/zzzzBov/pen/bEpdL). – zzzzBov

würde ich sagen, es so zu behandeln:

Outer "Grenze" - verwendet ein Feld
Inner "margin" Schatten - verwenden, um einen weißen Rand
Innenbereich - Verwendung Hintergrundfarbe

Insgesamt erhalten Sie:

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

Als Alternative könnten Sie ein zweites Element verwenden:

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

Quelle

2012-10-12 19:12:52 zzzzBov

Die äußere Grenze ist ziemlich schwach. Gibt es einen Weg, es ein bisschen sichtbarer zu machen? edit: benötigt eine extra Null drin 'box-shadow: 0 0 0 3px #fff;' – adamj

Versuchen mit:

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

Oder mit Innenpolster:

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

Siehe auch auf t seine Geige den Unterschied bei der Verwendung von Margin vs Padding CSS-Eigenschaften.

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

Quelle

2012-10-12 19:09:24

Ich sehe keine Lücke zwischen dem Hintergrund und dem Strich wie das Bild in meinem Beitrag –

Ich habe meine Geige aktualisiert .. sehen Sie es jetzt? http://jsfiddle.net/MQx7r/4/ –

Sie können mit outline-radiusoutline in Kombination verwendet werden. Überprüfen Sie diese jsFiddle.

Quelle

2012-10-12 19:10:39 Simone

Nur Firefox unterstützt Outline-Radius. – zzzzBov

css - Kreis mit Rand am Rand

Antwort

Verwandte Themen