Internet Explorer - 无处不在的 CSS 阴影答案

【问题标题】：Internet Explorer - CSS Shadow All AroundInternet Explorer - 无处不在的 CSS 阴影
【发布时间】：2011-10-20 19:08:04
【问题描述】：

我一直在为这个问题而烦恼，我想要一个围绕整个元素的简单阴影，除了顶部。我让它在 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')";

【问题讨论】：

+1 在这个问题上扯掉你的头发我做了同样的事情：d

标签： css internet-explorer shadow dropshadow

【解决方案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 会产生一个直下的阴影，给人一种高度的错觉。

【讨论】：

+1 就像一个魅力，我戴上了这个，我得到的一切都不起作用，试过这个，它起作用了 :)
作为记录，@timothy-perez 的回答 below 是我的一个更完整的版本 - 我不知道继承问题。

【解决方案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');
}

【讨论】：

【解决方案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;}

【讨论】：

这个渲染出来的外观只能用“松脆”来形容。

【解决方案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;
}

【讨论】：