本文主要是介绍如何用html边框画同心圆,纯CSS图形 - padding圆形/同心圆，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
之前讲述过几个使用纯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的白色区域！
这篇关于如何用html边框画同心圆,纯CSS图形 - padding圆形/同心圆的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
