最近开发遇到了一个需求：实现一个圆环，圆环的内圆和外环为同一个颜色，外环颜色透明度为0.25，如下图所示：

圆环CSS实现如下：

1234567891011121314
<style>
    .circle {
            width: 40px;
            height: 40px;
            border: 6px solid rgba(25,147,255,0.25);
            background-color: rgb(25,147,255)
            border-radius: 50%;
            display: inline-block;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
        }
</style>
<span class="circle"></span>

效果如下所示：

圆环0.25透明度并未生效，感觉被内圆的颜色覆盖了，Why？

css盒子模型中的background-color能控制的盒子模型内的content、padding和border中的颜色。

如何解决border颜色被background-color覆盖呢？MDN上找到了答案。

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

background-clip: border-box; // 背景延伸至边框外沿（但是在边框下层）
background-clip: padding-box; // 背景延伸至内边距（padding）外沿。不会绘制到边框处
background-clip: content-box; // 背景被裁剪至内容区（content box）外沿
background-clip: text; // 背景被裁剪成文字的前景色。

mdn > background-clip

circle样式增加 background-clip: padding-box即可，效果如下：