[Go] Make a three-dimensional effect with CSS3 shadows

CSS3 is very powerful and can use it to create a very brilliant effect, using the CSS3 two properties to create a three-dimensional effect. The effect diagram is as follows:

Two CSS3 properties used: Box-shadow, transform, basic syntax:
Box-shadow

box-shadow:5px 2px 6px #000;
Values are left-to-right: Shadow horizontal offset value (positive value right, negative value left), Shadow vertical offset value (positive downward, negative value up), shadow blur value, Shadow color.

Transform
The transform has a lot of effects and only rotates here:

Transform:rotate ( -3DEG)
Numeric values represent the angle of rotation, positive values are clockwise, and negative values are counterclockwise.
Because CSS3 is still a draft, the latest version of the existing browser is to support transform with a private attribute, need to add-webkit-、-moz-、-o-、-ms-

Concrete implementation of the idea: in order to highlight the three-dimensional, to let the shadow around the middle light, here used:: Before,::after pseudo-elements, create and let them positioned after the #demo element (z-index:-1), while setting the shadow, and set the rotation, the idea with a picture to represent this:

This is the effect we want, the specific code to see the demo:

<! DOCTYPE html>  
 
 Original link: http://www.iinterest.net/2011/04/21/css3-box-shadow/