Box shadow in css

The box-shadow CSS property describes one or more shadow effects as a comma-separated list. It allows casting a drop shadow from the frame of almost any element. If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners. The z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top).

Used in casting shadows off block-level elements (like divs). 

CSS

-------------------------------------------------------------------------------------

.shadow {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}

-------------------------------------------------------------------------------------

1. The horizontal offset.
2. The vertical offset.
3. The blur radius (optional).
4. The spread radius (optional).
5. Color ex.#cccccc

Inner Shadow

CSS

-------------------------------------------------------------------------------------

 .shadow {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}

-------------------------------------------------------------------------------------

Internet Explorer Box Shadow

for this you need extra elements...

HTML

-------------------------------------------------------------------------------------

<div class="shadow1">
 <div class="content">
  Box-shadowed element
 </div>
</div>

-------------------------------------------------------------------------------------

CSS

-------------------------------------------------------------------------------------

.shadow1 {
 margin: 40px;
 background-color: rgb(68,68,68); /* Needed for IEs */

 -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
 -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
 box-shadow: 5px 5px 5px rgba(68,68,68,0.6);

 filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
 -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
 zoom: 1;
}
.shadow1 .content {
 position: relative; /* This protects the inner element from being blurred */
 padding: 100px;
 background-color: #DDD;
}

-------------------------------------------------------------------------------------

Single-Side Only

Using a negative spread radius, you can get squeeze in a box shadow and only push it off one edge of a box.

CSS

-------------------------------------------------------------------------------------

.single-edge-shadow {
 -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
         box-shadow: 0 8px 6px -6px black;
}

-------------------------------------------------------------------------------------

Try and enjoy..