之前講述過幾個使用純CSS制作的圖形，比如三角形《border繪制三角形（各種角度）》

三橫線《三橫線(三道杠)padding制作出來》、《border-style:double制作三橫線》

今天來分享下上圖所示的使用CSS繪制同心圓，主要使用padding屬性！

代碼如下：

<style>
 .box{
    width: 100px; height: 100px;
  border-radius: 50%;
  padding: 10px;
  border: 10px solid;
  background-color: currentColor;
  background-clip:content-box;
 }
</style>
<div class="box"></div>

詳細來說明下這段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的白色區域！