Css 无法将IE8中的半透明渐变过滤器与阴影过滤器组合

在IE8中，我试图模拟将RGBA背景和长方体阴影应用于div的效果。如果设置不透明背景，我可以使用Microsoft“阴影”过滤器成功实现长方体阴影效果。背景设置为“透明”，我可以通过应用“渐变”过滤器获得RGBA背景。但是，如果我尝试这样组合两个过滤器

div#translucentBG {
  zoom       : 1;
  background : transparent;

  filter: 
    progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#80464646, EndColorStr=#80464646),
    progid:DXImageTransform.Microsoft.Shadow(Color=#ffffff, Strength=5, Direction=0),
    progid:DXImageTransform.Microsoft.Shadow(Color=#ffffff, Strength=5, Direction=90),
    progid:DXImageTransform.Microsoft.Shadow(Color=#ffffff, Strength=5, Direction=180),
    progid:DXImageTransform.Microsoft.Shadow(Color=#ffffff, Strength=5, Direction=270);
}

然后，div将具有正确的长方体阴影，但具有不透明的#4646背景。只需移除所有阴影过滤器，div就会神奇地再次变为半透明。这是相当令人沮丧的；由于IE完美地分别呈现了这两种效果，我无法想象当组合它们时为什么会失败。我知道可能有变通方法和替代方法，但我真正感兴趣的是，为什么上述技术会失败。

解释 我设置为让人们看到效果（当然是在IE8中）

我相信原因是渐变是作为一个“填充”值注册的，当它注册时，阴影本身填充在它后面的实体中。这实际上是去除了你可能正在寻找的透明度（也就是说，它是透明的，它只是通过下面的阴影显示出来，这是不透明的，从而覆盖了背景）。请注意，在我的示例中，最后一个

div

根本没有“显示”，因为在没有填充“阴影”的情况下，不会应用放置阴影

如果只应用

边框

，就像在上一个

div

中一样，则阴影实际上会填充到渐变后面，这一事实进一步证明了这一点。因此，阴影不仅仅是一个“边”属性，它不会在对象的填充下方填充

盒阴影比较 显示

框阴影

实现

请注意，

box shadow

的行为不同于IE

shadow

过滤器的行为。您没有“被FF/Chrome中长方体阴影属性的行为所迷惑，它的行为类似于边缘属性”，因为它是一个边缘属性。（好吧，也许你误以为IE过滤器也可以工作。）除非

inset

关键字是定义的一部分（在这种情况下，它只填充到内部），否则它不会在框后面填充。

框阴影

规格说明（添加强调）：

外部框阴影投射阴影，就像元素的边框框一样 是不透明的。阴影仅在边界边缘外绘制：它是 剪裁在元素的边框框内

---

这正是您在FF/Chrome中看到的。IE过滤器早在盒影出现之前就存在了，它的实现方式明显不同。请注意，我在上面的引文中还强调，元素被视为不透明，这意味着即使是

背景：透明的

也会显示阴影（如底部的提琴示例所示）。这也不同于IE

Shadow

filter。

我很欣赏这款小提琴，尽管我目前没有IE8可用。你的解释有道理。我想我被FF/Chrome中的box shadow属性的行为所迷惑，它的行为就像一个edge属性；如果框阴影填充在元素后面的区域，这不会阻止与rgba的结合，就像在IE中一样？@sacheie--我更新了答案，并根据您的评论添加了一些关于与

框阴影

进行比较的进一步解释。谢谢Scott，我希望我能更多地支持您的答案。阴影过滤器通常是作为盒子阴影的替代品出现的，但现在我看到，在假设任何东西之前，必须仔细阅读规范。