如何用html边框画同心圆,纯CSS图形

如何用html边框画同心圆,纯CSS图形

之前讲述过几个使用纯CSS制作的图形，比如三角形《border绘制三角形(各种角度)》

今天来分享下上图所示的使用CSS绘制同心圆，主要使用padding属性！

代码如下：

.box{

width: 100px; height: 100px;

border-radius: 50%;

padding: 10px;

border: 10px solid;

background-color: currentColor;

background-clip:content-box;

}

详细来说明下这段CSS属性的含义：

width: 100px; height: 100px就不用说了吧，先预设高和宽都为100px

border-radius:50%，意思为圆角50%，这是必须的！

padding:10px，透明边距为10px，就是同心圆空白区域

border:10px solid，10px边框，就是同心圆外部黑色圆圈了

background-color: currentColor; 当前的标签所继承的文字颜色，也可自定义颜色值

background-clip:content-box;这句话是只让背景色在内容区域显示，padding不算内容区了，所以padding那白色的10px就不会被使用背景色了，所以才存在10px的白色区域！