带有两个不同颜色边框的 CSS 圆圈，或者至少看起来像 [重复]答案

【问题标题】：CSS circle with two borders of different colors or at least looks like [duplicate]带有两个不同颜色边框的 CSS 圆圈，或者至少看起来像 [重复]
【发布时间】：2013-07-07 19:04:36
【问题描述】：

我有一个带有一个边框的圆，但我想知道是否有办法实现一个带有两个不同颜色边框的圆。我有以下 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

您现在可以看到它有一些白色边框。我想在白色边框上添加另一个边框。

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

【问题讨论】：

没有什么愉快的事情浮现在脑海中。您可以添加另一个圆形（透明，但有边框）并将其直接放置在现有圆形的上方或下方......或者可能使用 css 边框图像？很抱歉提供的信息不是很丰富。

标签： css border geometry css-shapes

【解决方案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;

【讨论】：

太棒了！谢谢 GilvertOOl
感谢 GilbertOOI ！正是我需要的:)
正是我想要的，谢谢！

【解决方案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-indexes 都需要获得正确的分层。

【讨论】：

非常感谢凯利！像魅力一样工作:)