CSS pseudo-class before after implementation stereo 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%;}

<div class= "Div1" >123</div>    <div class= "Div2" >123</div>    <div class= "Div3" > 123</div>

http://jsfiddle.net/N93a3/

Summarize:

If you use before or after you must assign a content property to it, it is empty to show the effect. A div that uses pseudo-classes is generally set to position:relative, and pseudo-class elements are generally set to Position:absolute. The effect of shadowing is generally based on the Box-shaw attribute of the pseudo-class element, which is generally set behind the div and is blocked by it. Div's Border-radius can be set to Xxpx/xxpx to get unexpected results.

