Internet Explorer - CSS Shadow All Around

Question

我一直在为这个问题撕开我的头发,我想要一个简单的阴影围绕整个元素,除了顶部.我让它在Firefox和Chrome中运行没有问题.但IE有这种奇怪的"方向"设置,另外4个数字定义阴影.

有人可以帮我定义正确的CSS,这样除了顶部之外它会在整个元素周围留下阴影.

/* 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

阴影滤镜是单向的,方向是1到360度之间的数字.要生成能够偏移该阴影的框阴影,您需要使用多个阴影滤镜:

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

这是按照顶部/右侧/底部/左侧排序,并且改变任何一侧的强度将改变该阴影的大小.例如,2 5 5 10将产生一个直下投影,给人以高度的错觉.

Answer 2

与上面的答案类似(见下面的注释):

#boxContainer{ 
   filter:
        progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=0, Color='#000000'),
        progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#000000'),
        progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#000000'),
        progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=270, Color='#000000');
}

重要提示: 请记住,IE中还存在一个错误,它会将相同的样式应用于子元素.因此,如果愿意,您可能需要应用"计数器"/"Nullifier".

例:

#boxContainer button, #boxContainer div, #boxContainer span {
  /* Nullify Inherited Effect - Set "Strength=0" */
  filter:
    progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=0, Color='#000000'),
    progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=90, Color='#000000'),
    progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=180, Color='#000000'),
    progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=270, Color='#000000');
}

Answer 3

请尝试使用"发光"滤镜:

http://msdn.microsoft.com/en-us/library/ms532995(v=VS.85).aspx

 DIV.aFilter {
    filter:progid:DXImageTransform.Microsoft.Glow(Color=blue,Strength=5);
    width: 150px;}