核心提示：p { width:200px; height:200px; border:1px solid #ccc; position: relative; background-color:#fff; flo...
p {
width:200px;
height:200px;
border:1px solid #ccc;
position: relative;
background-color:#fff;
float: left;
text-align: center;
margin: 30px;
}
.p1::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);
}
.p1::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);
}
.p2 {
border-bottom-right-radius: 50px;
box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
}
.p2::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);
}
.p3 {
border-radius: 60px / 5px;
}
.p3::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%;
}
.p3::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%;
}
123
123
123
https://jsfiddle.net/N93a3/
总结：
