Css pseudo-class before after achieves stereoscopic effect

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%;}

123123123

Http://jsfiddle.net/N93a3/

Summary:

If you use before or after, you must assign a content attribute to it. If it is null, the effect can be displayed. Div with pseudo classes is generally set to position: relative; pseudo-class elements are generally set to position: absolute. The implementation of the shadow effect is generally based on the box-shaw attribute of pseudo-class elements, which is usually set behind the div and blocked by it. The border-radius of the div can be set to xxpx/xxpx for unexpected results.