通过padding,border和background-clip制作css图标

 1 <div class="icon"> </div>
 2 <style>
 3     .icon{
 4         width:500px;
 5         height: 500px;
 6         padding: 30px;
 7         border-radius: 50%;
 8         border: 30px solid red;
 9         background-color: red;
10         background-clip: content-box;
11     }
12 </style>

生成同心圆,关键点在于这一句

background-clip: content-box;

因为 padding在content外侧不占用空间,再加上border,就可以实现效果

类似的还有三道杠

 1 <div class="w"> </div>
 2 <style>
 3     .w{
 4         width:500px;
 5         height: 500px;
 6         padding: 205px 0;
 7         border-top: 30px solid red;
 8         border-bottom: 30px solid red;
 9         background-color: red;
10         background-clip: content-box;
11     }
12 </style>

padding: 205px 0; 的来历:

(500-30-30-30) /2

(height - border`top - border`bottom - content`height ) / 2