纯CSS实现立体感圆盘（常用于按钮）

<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进行计算。