具有两个不同颜色或至少看起来像的边框的 CSS 圆圈

Question

<分区>

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;