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

这是jsFiddle 的链接

你可以看到目前它有一些白色的边界。我想在白色边框的顶部添加另一个边框。

如果你有什么想法/建议，请告诉我。

Answer 1

Hi-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都需要获得正确的分层。