带有两个不同颜色边框的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

嗨u能做出这也：

.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才能获得正确的分层。