CSS background-clip 属性妙用

最近开发遇到了一个需求:实现一个圆环,圆环的内圆和外环为同一个颜色,外环颜色透明度为0.25,如下图所示:
巡检点颜色.png

圆环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即可,效果如下:

手写 Collapse 折叠面板
JavaScript常用工具函数集
luoqiangweb开发China
文章21
分类10
标签5