Question

我有以下代码，它会生成一个带圆角和阴影的框。它应该与所有浏览器兼容，它确实是，但问题是我需要透明阴影，IE不支持RGBA值：（

<style>
#box {
  width: 250px;
  height: 250px;
  background-color: #1e9ad3;
  padding: 20px;
  margin: 20px;

  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  behavior: url(PIE.htc);

  box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
  -webkit-box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
  -moz-box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
}
</style>
<body>
  <div id="box">
    Hello world!
  </div>
</body>

有任何建议如何做到这一点？我的“盒子”可能在不同的背景上，或者在背景上有纹理，这就是为什么我不能使阴影的颜色变浅灰色。

以下是实例：http://bbin.own.cz/box.html

Answer 1

CSS3Pie documentation给出答案。

PIE在任何允许的地方解析RGBA颜色值。但是，它只能在几个上下文中成功呈现其不透明度值。在所有其他环境中，它们将使用正确的RGB颜色进行渲染，但完全不透明。以下是支持的上下文，其中将正确呈现不透明度：


-pie-background属性中指定的纯色背景色。

如果阴影没有模糊，则为阴影的颜色值。

简而言之，答案是否定的，这是不可能做到的。 IE根本不支持RGBA。 CSS3Pie能够在几个上下文中完成，但带有模糊的盒子阴影不起作用。

如果CSS3Pie无法做到，那么可以肯定的是，这在IE中是不可能的。

如果你失去模糊，你将能够做到这一点，但当然这会改变整个效果，所以它对你来说并不是真正的解决方案。

Answer 2

您需要在IE8之前使用自定义MS设置

/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);

没有对此进行测试，但您可以谷歌获取更多信息。 source

IE中的透明阴影

2 个答案: