css伪类beforeafter实现立体效果

div {
 width:200px;
 height:200px;
 border:1px solid #ccc;
 position: relative;
 background-color:#fff;
 float: left;
 text-align: center;
 margin: 30px;
}
.div1::after {
 z-index: -15;
 position: absolute;
 content: "";
 bottom: 14px;
 right: 7px;
 width: 36%;
 top: 59%;
 max-width: 300px;
 background: #777;
 box-shadow: 0 15px 10px #A5A5A5;
 -webkit-transform: rotate(3deg);
}
.div1::before {
 z-index: -15;
 position: absolute;
 content: "";
 bottom: 14px;
 left: 6px;
 width: 36%;
 top: 59%;
 max-width: 300px;
 background: #777;
 box-shadow: 0 15px 10px #A5A5A5;
 -webkit-transform: rotate(-3deg);
}
.div2 {
 border-bottom-right-radius: 50px;
 box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
}
.div2::after {
 content: '';
 width: 22px;
 height: 22px;
 position: absolute;
 bottom: 0px;
 right: 0px;
 border-radius: 0 0 16px 0;
 box-shadow: -2px -2px 5px rgba(65, 65, 65, 0.38);
 -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-10px,-10px);
}
.div3 {
 border-radius: 60px / 5px;
}
.div3::after {
 z-index: -15;
 position: absolute;
 content: "";
 bottom: 2px;
 left: 4%;
 width: 91%;
 height: 10px;
 max-width: 300px;
 background: #777;
 box-shadow: 0px 4px 11px 1px #A5A5A5;
 border-radius: 50%;
}
.div3::before {
 z-index: -15;
 position: absolute;
 content: "";
 left: 4%;
 width: 91%;
 height: 10px;
 top: 4px;
 max-width: 300px;
 background: #777;
 box-shadow: 0px -4px 11px 1px #A5A5A5;
 border-radius: 50%;
}

<div class="div1">123</div>
 <div class="div2">123</div>
 <div class="div3">123</div>