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 的链接

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

如果您有任何想法/建议，请告诉我。

- premsh

---

脑海中没有什么愉快的想法。您可以添加另一个圆形图形（透明，但带有边框），并将其直接放置在现有圆形上方或下方... 或者可能使用CSS边框图像？对于这些不太具体的建议，我感到抱歉。 - Pete Scott

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;

- GilbertOOl

---

太棒了！谢谢GilvertOOl。 - premsh

谢谢GilbertOOI！正是我需要的 :) - Laila

非常感谢，这正是我要找的内容！ - rilar

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都是必需的，以获得正确的图层。

- kalley