線上編輯：https://codepen.io/sunnercms/

<div class="inner">
  <div class="disc">
  </div>
</div>

.inner{
  position:relative;
  width:300px;
  height:300px;
  border-radius:150px;
  background: linear-gradient(to top, silver, whitesmoke);
  display:flex;
  justify-content:center;
  align-items:center;
}
.inner .disc{
  position:absolute;
  width:80%;
  height:80%;
  border-radius:50%;
  background:linear-gradient(silver,whitesmoke);
}
/* .inner .disc::before{
  position:absolute;
  left:calc((100% - 80%)/2);
  top:calc((100% - 80%)/2);
  content:"";
  width:80%;
  height:80%;
  border-radius:50%;
  background:linear-gradient(to top, silver,whitesmoke);
}
.inner .disc::after{
  position:absolute;
  left:calc((100% - 60%)/2);
  top:calc((100% - 60%)/2);
  content:"";
  width:60%;
  height:60%;
  border-radius:50%;
  background:linear-gradient(silver,whitesmoke);
} */
 

第一個圖形：是用來兩個元素標籤,一個嵌在另一個裡面，利用兩個顏色的視覺差，實現立體化效果。

第二個圖形：後面整加的兩個內園，是利用了偽元素實現的，偽元素的定位是相對於偽元素寄託的元素，使用left,top時可以藉助calc進行計算。