版权声明： https://blog.csdn.net/qq_39207948/article/details/83627027
在线编辑：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进行计算。