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

嗨,你也可以这样做:

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