之前讲述过几个使用纯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的白色区域!