Круг CSS с двумя границами разных цветов или, по крайней мере, выглядит как

Question

У меня есть круг с одной границей, но я хотел бы знать, есть ли в любом случае для достижения круга с двумя границами разных цветов. У меня следующий CSS производить круг следующим образом:

.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

Вы могли видеть, в настоящее время она имеет некоторые белой каймой. Я хотел бы добавить еще одну границу поверх белой границы.

Пожалуйста, дайте мне знать, если у вас есть идеи/предложения.

Answer 1

Привет и может сделать это также:

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

преимущество заключается в том, что вы также можете поместить эффект размытия, изменяя как это:

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

Answer 2

Если я вас правильно понял, я думаю, что вы хотите сделать что-то вдоль этих линий: 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; 
} 

Вы заметите, что я взял свой первоначальный цвет фона и добавить его в :before псевдо- элемент, переместил #fff на задний план и сделал свой другой цвет границы (в этом примере #000) цвет границы исходного элемента. Для получения нужного слоя требуются как z-index es.