2

我有以下代码，它制作了一个带有圆角和阴影的盒子。它应该与所有浏览器兼容，确实如此，但问题是我需要透明阴影并且 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

4

2 回答 2

0

CSS3Pie文档给出了答案。

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

  • -pie-background 属性中指定的纯色背景色。
  • box-shadow 的颜色值，如果阴影没有模糊。

简而言之，答案是否定的，这是做不到的。IE 根本无法正确支持 RGBA。CSS3Pie 能够在一些情况下做到这一点，但是带有模糊的盒子阴影是行不通的。

如果 CSS3Pie 不能做到这一点，那么在 IE 中根本不可能做到这一点是一个不错的选择。

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

于 2011-07-15T14:33:22.663 回答
0

您需要为 pre 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);

尚未对此进行测试，但您可以谷歌搜索更多信息。资源

于 2011-07-15T14:37:00.933 回答