Question

我试图在IE8中模仿同时将RGBA背景和box-shadow应用于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将具有正确的框阴影但不透明的＃464646背景。只需删除所有阴影滤镜，神奇地，div再次变为半透明。这非常令人沮丧;因为IE将这两种效果完全分开，我无法想象它们在组合时会失败的原因。我知道可能有可用的解决方法和替代方法，但真正让我感兴趣的是上述技术失败的原因。

Answer 1

说明

我设置this fiddle让人们看到效果（当然是在IE8中）。

我相信原因是渐变是注册为“填充”值，当它出现时，投影本身就会填充后面的。这实际上剥夺了你可能正在寻求的透明度（也就是说，是透明的，它只是显示到下面的阴影，是不透明的，并且从而掩盖了背景）。请注意我的示例小提琴中的最后一个div根本没有“显示”，因为当没有填充“阴影”时，投影不会被应用。

事实上，只应用了border，就像this fiddle上This fiddle上的div一样，这一事实进一步支持了阴影实际填充在渐变后面的事实。投影也会“进入”div。所以阴影不仅仅是一个“边缘”属性，它不会填充在对象的填充下面。

盒子阴影比较

the specification显示box-shadow实施。

请注意，box-shadow的{{3}}与IE Shadow过滤器的行为不同。你并没有“被FF / Chrome中的box-shadow属性的行为所迷惑，它的行为就像一个边缘属性”，因为它是一个边缘属性。（好吧，也许你误以为IE过滤器的工作方式是相同的。）除非inset关键字是定义的一部分，否则不会在框后面填充它（在这种情况下），它只填充到里面）。 box-shadow规范说（重点补充）：

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

这正是您在FF / Chrome中看到的。 IE过滤器在box-shadow之前很久就已经存在了，它的实现方式明显不同。请注意，我在上面的引文中也强调该元素被视为不透明，这意味着即使background: transparent也会显示阴影（如示例小提琴显示在底部）。这也与IE Shadow过滤器不同。

在IE8中无法将半透明渐变滤镜与阴影滤镜结合使用

1 个答案:

说明

盒子阴影比较