一层标签实现双层圆点

最新在阅读张鑫旭大佬的《CSS世界》，补充下CSS相关的知识点。

发现一个比较有趣的方法，如题，一层标签实现双层圆点，很惊奇，速度实战到项目中。

CSS代码如下：

.icon-dot {
    display: inline-block;
    width: 20px;
    height: 20px;
    padding: 4px;
    border: 2px solid;
    border-radius: 50%;
    background-color: currentColor;
    background-clip: content-box;
}

实际效果：

其中border-width决定了外层远点的大小，width - padding*2为内部圆点的直径（如果box-sizing: border-box，则直径为width - padding*2 - borderWidth*2）。

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

需要注意的是双层圆点中间的背景色部分是透明的，如果想要不透明的效果，需要二次加工。