css和html，chrome css sourcemap，css3 loadding，div在css设置文字，css 选择器叠加，css阻止用户选择图片 下载，css table 设置列宽
之前讲述过几个使用纯CSS制作的图形，比如三角形《border绘制三角形（各种角度）》
三横线《三横线(三道杠)padding制作出来》、《border-style:double制作三横线》
今天来分享下上图所示的使用CSS绘制同心圆，主要使用padding属性！
代码如下：
<style>
.box{
width:100px;height:100px;
border-radius:50%;
padding:10px;
border:10pxsolid;
background-color:currentColor;
background-clip:content-box;
}
</style>
<divclass="box"></div>详细来说明下这段CSS属性的含义：
width: 100px; height: 100px就不用说了吧，先预设高和宽都为100px
border-radius:50%，意思为圆角50%，这是必须的！
padding:10px，透明边距为10px，就是同心圆空白区域
border:10pxsolid，10px边框，就是同心圆外部黑色圆圈了
background-color: currentColor; 当前的标签所继承的文字颜色，也可自定义颜色值
background-clip:content-box;这句话是只让背景色在内容区域显示，padding不算内容区了，所以padding那白色的10px就不会被使用背景色了，所以才存在10px的白色区域！