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