题外话：拟物风确实挺好看的，虽然现在还不算流行，但是对于设计来说应该是个趋势吧。
首先先看一下效果（虽然效果还是有些生硬，仅供参考）
代码模块：其实主要运用到css3的box-shadow属性（友情链接：https://www.w3school.com.cn/cssref/pr_box-shadow.asp）
<body>
<div class="container">
<div class="block">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="circle">
<div class="cir"></div>
</div>
</div>
</body><style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.container{
width: 100%;
height: 800px;
background: #EAEBF3;
}
.block{
width: 100%;
height: 300px;
position: relative;
}
.big{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 78px;
height: 78px;
border-radius: 10px;
background: #EAEBF3;
box-shadow:
-5px 0px 10px 1px rgba(255, 255, 255,0.8),/*左*/
0px -5px 10px 1px rgba(255, 255, 255,0.8),/*上*/
5px 0px 10px 1px rgba(0, 0, 0,0.1),/*右*/
0px 5px 10px 1px rgba(0, 0, 0,0.1);/*下*/
}
.small{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 50px;
height: 50px;
border-radius: 10px;
background: #EAEBF3;
box-shadow:
5px 0px 5px 2px rgba(0, 0, 0,0.1) inset,/*左*/
0px 5px 5px 2px rgba(0, 0, 0,0.1) inset,/*上*/
-5px 0px 5px 2px rgba(255, 255, 255,0.8) inset,/*右*/
0px -5px 5px 2px rgba(255, 255, 255,0.8) inset;/*下*/
}
.circle{
width: 100%;
height: 100px;
position: relative;
}
.cir{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 80px;
height: 80px;
border-radius: 40px;
background: #EAEBF3;
box-shadow:
-5px 0px 10px 1px rgba(255, 255, 255,0.8),/*左*/
0px -5px 10px 1px rgba(255, 255, 255,0.8),/*上*/
5px 0px 10px 1px rgba(0, 0, 0,0.1),/*右*/
0px 5px 10px 1px rgba(0, 0, 0,0.1);/*下*/
}
</style>