The CSS3 has many features. Box-shadow is the new feature of the backgrounds and borders module which works in Firefox 3.1(Alpha)and Safari3+.

The property takes 3 lengths and a color as it’s attributes, the lengths are:

  • 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;

  • 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;

  • the blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.

HTML Code is as follows:

<p id=”box-shadow”>Welcome to Web Designer Harshal Sawant’ Blog. Enjoy web design with me.</p>

CSS class is as follows:

#box-shadow {
margin: 10px 0;
box-shadow: 10px 10px 0px #333;
-o-box-shadow: 10px 10px 0px #333;
-icab-box-shadow: 10px 10px 0px #333;
-khtml-box-shadow: 10px 10px 0px #333;
-moz-box-shadow: 10px 10px 0px #333;
-webkit-box-shadow: 10px 10px 0px #333;
padding: 5px 5px 5px 15px;
background-color: #eee;
width: 90%;
border-radius: 5px;
-o-border-radius: 5px;
-icab-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

Use -moz- and -webkit- prefix for box-shodow to support cross browsers. For Opera -o- added In the above code, -moz is for Firefox and -webkit- is for Safari and Chrome also -icab- and -khtml- are the render engine prefixes use for cross browsers.