CSS3 Box shadow

CSS 3 allows us to add drop shadows using the box-shadow directive. The box shadow directive is for creating drop shadows on box-model elements, eliminating the need for background images or JavaScript solutions to achieve this effect. The box shadow directive is not for adding shadows to text

Box-shadow takes 3 lengths and a color as it’s attributes, the lengths are:

1. the horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box;
2. the vertical offset, a negative one means the box-shadow will be on top of the box, a positive one means the shadow will be below the box;
3. the blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.

//In practical terms – this is an example how you would use the directive in a style-sheet right now:
 
 
-moz-box-shadow: 3px 3px 4px #999;
-webkit-box-shadow: 3px 3px 4px #999;
box-shadow: 3px 3px 4px #999;
 

The box-shadow is supported by Safari 3+ and Firefox 3.1+ and IE 9+