Internet Explorer - CSS 阴影全包围。

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

- Thomas Depole

---

+1 因为这个问题而抓狂，我也有同感 :d - Jack

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将产生一个直向下的投影阴影，给人以高度的错觉。

- egid

---

+1 很好用，我谷歌了很多但都不行，尝试了这个就可以了 :) - Jack

仅供记录，@timothy-perez的回答下面是比我更完整的版本 - 我没有意识到继承问题。 <3 IE. - egid

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中还存在一个错误，它将同样的样式应用于子元素。因此，您可能需要应用一个"counter" / "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');
}

- Timothy Perez

Answer 3

尝试使用“glow”滤镜代替：

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

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

- Diodeus - James MacFarlane

---

这个渲染出来的外观只能用“粗糙”的形容词来描述。 - Timothy Perez

Answer 4

这里有一些解决方案： http://www.artlebedev.com/tools/technogrette/html/filters-in-ie/ 结合发光和模糊滤镜，效果显著更好，引用上述页面中的一个代码示例：

.shadowed .shadow-3
{
filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1.0)
progid:DXImageTransform.Microsoft.Alpha(opacity=25)
progid:DXImageTransform.Microsoft.Blur(pixelradius=1.75, enabled='true');
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1.0)"
"progid:DXImageTransform.Microsoft.Alpha(opacity=25)"
"progid:DXImageTransform.Microsoft.Blur(pixelradius=1.75, enabled='true')";
color: #111111;
top: -2px;
left: -2px;
}

- Jeremy