CSS圆圈有两个不同颜色的边框或至少看起来像 [英] CSS circle with two borders of different colors or at least looks like

问题描述

我有一个带有一个边框的圆圈，但我想知道是否还有一个圆圈有两个不同颜色的边框。我有以下CSS生产圈如下：

I have a circle with one border, but I would like to know if there is anyway to achieve a circle with two borders of different colors. I have following CSS producing circle as follows:

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

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

You could see currently it has some white border. I would like to add another border on top of white border.

请让我知道您是否有任何想法/建议。

Please let me know if you have any ideas/suggestions.

推荐答案

您也可以：

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

也会产生模糊效果，改变如下：

the advantage is that you can also put a blur effect, changing like this:

box-shadow: 0 0 3px 3px #002525;

这篇关于CSS圆圈有两个不同颜色的边框或至少看起来像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！