Internet Explorer - CSS Shadow All Around

Question

I have been ripping my hair out over this issue, I want a simple shadow that does around the whole element, besides for the top. I got it to work in Firefox and Chrome with no problem. But IE has this weird "direction" setting where as the other as 4 numbers to define the shadow.

Can someone help me define the right CSS so that it will have a shadow around the whole element besides the top.

/* For Firefox and Chrome */
-moz-box-shadow: 0px 0px 7px #000;
-webkit-box-shadow: 0px 0px 7px #000;
 box-shadow: 0px 0px 7px #000;

 /* for IE */
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=600, Color='#000000')";

Answer 1

The shadow filter is unidirectional, and direction is a number between 1 and 360 degrees. To generate a box shadow with the ability to offset that shadow, you'll need use multiple shadow filters:

   filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=0),
     progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=90),
     progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=180),
     progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=270);

This is sorted top/right/bottom/left, and varying the strength on any one side will alter the size of that shadow. For example, 2 5 5 10 will produce a straight-down drop shadow that gives the illusion of height.