box-shadow
box-shadow
requests at least 3 values, 4 at the maximum:Box-shadow with positive value
box-shadow: 10px 10px 20px #000;
-webkit-box-shadow: 10px 10px 20px #000;
-moz-box-shadow: 10px 10px 20px #000;
Box-shadow with negative value
box-shadow: -10px -10px 20px #000;
-webkit-box-shadow: -10px -10px 20px #000;
-moz-box-shadow: -10px -10px 20px #000;
box-shadow with no blur
box-shadow:10px 10px #000;
-webkit-box-shadow:10px 10px #000;
-moz-box-shadow: 10px 10px #000;
Box-shadow + border-radius
box-shadow:10px 10px #000;
-webkit-box-shadow:10px 10px #000;
-moz-box-shadow: 10px 10px #000;
Box-shadow inset (currently only supported by Firefox)
box-shadow: inset 5px 5px #000;
-webkit-box-shadow inset :5px 5px #000;
-moz-box-shadow: inset 10px 5px #000;
The shadow is not part of the box model, it does not add dimension such as padding to the element. If we float two boxes with shadow, there is no space between them as there would be in previous techniques where padding was added to display a background shadow image. If you have two elements and you want to show the shadow, you must add sufficient margin to move the second one out of the way:
Box-shadow multiple color side
box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;
-moz-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;
-webkit-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;
Firefox, Safari, Chrome, Opera
IE Drop shadow filter: http://msdn.microsoft.com/en-us/library/ms532985%28VS.85%29.aspx
<DIV STYLE="width:100%; filter:
progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310)
progid:DXImageTransform.Microsoft.Blur(pixelradius=2)
progid:DXImageTransform.Microsoft.Wheel(duration=3);">
Blurry text with smudge of gray.</div>
Based on: http://css.flepstudio.org/en/css3/box-shadow.html
http://www.bloggingcss.com/en/tutorials/css3-box-shadow-property/
http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/