Kółko CSS z dwoma obramowaniami w różnych kolorach lub przynajmniej wygląda jak

Question

Mam krąg z jedną ramką, ale chciałbym wiedzieć, czy jest tak, aby uzyskać okrąg z dwiema krawędziami o różnych kolorach. Mam następujące CSS produkujących koło następująco:

.circle { 
    width: 20px; 
    height: 20px; 
    border-radius: 12px; 
    border: 1.5px solid #fff; 
    font-family: Cambria; 
    font-size: 11px; 
    color: white; 
    line-height: 20px; 
    text-align: center; 
    background: #3E78B2; 
} 

.circle:hover { 
    width: 27px; 
    height: 27px; 
    border-radius: 18px; 
    font-size: 12px; 
    color: white; 
    line-height: 27px; 
    text-align: center; 
    background: #3E78B2; 
} 

Here is link to jsFiddle

Widać obecnie, że ma jakąś białą obwódkę. Chciałbym dodać kolejną granicę na białym obramowaniu.

Proszę dać mi znać, jeśli masz jakieś pomysły/sugestie.

Answer 1

Cześć u może to zrobić także:

.container { 
    background-color: grey; 
    height: 200px; 
    padding:10px; // ADD THIS ALSO 
} 
.circle { 
    width: 20px; 
    height: 20px; 
    border-radius: 12px; 
    border: 1.5px solid #fff; 
    font-family: Cambria; 
    font-size: 11px; 
    color: white; 
    line-height: 20px; 
    text-align: center; 
    background: #3E78B2; 
    box-shadow: 0 0 0 3px #002525; // JUST ADD THIS LINE AND MODIFY YOUR COLOR 
} 

zaletą jest to, że można również umieścić efekt rozmycia, zmieniając w ten sposób:

box-shadow: 0 0 3px 3px #002525; 

Answer 2

Jeśli rozumiem zostanie poprawnie, myślę, że szukasz czegoś wzdłuż tych linii: http://jsfiddle.net/QCVjr/1/

.circle { 
    width: 20px; 
    height: 20px; 
    border-radius: 12px; 
    border: 1.5px solid #000; 
    font-family: Cambria; 
    font-size: 11px; 
    color: white; 
    line-height: 20px; 
    text-align: center; 
    background: #fff; 
    position: relative; 
    z-index: 1; 
} 
.circle:before { 
    position: absolute; 
    right: 2px; 
    top: 2px; 
    left: 2px; 
    bottom: 2px; 
    content: ''; 
    background: #3E78B2; 
    border-radius: 25px; 
    z-index: -1; 
} 
.circle:hover { 
    width: 27px; 
    height: 27px; 
    border-radius: 18px; 
    font-size: 12px; 
    color: white; 
    line-height: 27px; 
    text-align: center; 
    background: #fff; 
} 

Zauważysz, że wziąłem swój oryginalny kolor tła i dodania go do :before pseudo- element, przesunął #fff na tło i uczynił twój inny kolor obramowania (w tym przykładzie, #000) kolor obramowania oryginalnego elementu. Zarówno z-index es są wymagane, aby uzyskać odpowiednią warstwę.