CSS box-shadow 在 IE 或 Safari 中不起作用答案

【问题标题】：CSS box-shadow did not work at IE or SafariCSS box-shadow 在 IE 或 Safari 中不起作用
【发布时间】：2011-10-03 16:46:01
【问题描述】：

#keyboard {
position: fixed;
background: #eee;
display: none;
border: 1px solid #ccc;
border-radius:7px;
width: 950px;
height: 300px;
padding: 5px;
cursor: move;
background-image:url('BackgroundImage.jpg');
box-shadow: -5px -5px 5px 5px #888; 
-moz-border-radius: -5px -5px 5px 5px #888;
-webkit-border-radius: -5px -5px 5px 5px #888;

}

在上层css代码中，在Firfox浏览器上是好的。但我无法在 IE8 或 IE6 和 safari 上显示阴影。

box-shadow: -5px -5px 5px 5px #888;

请告诉我解决方案。

【问题讨论】：

标签： html css internet-explorer firefox safari

【解决方案1】：

为了给 IE 用户提供类似于 box-shadow 的效果，我通常使用专有的 MS 过滤器，以下是我的 css 的摘录：

-moz-box-shadow: 2px 4px 19px #333333;
-webkit-box-shadow: 2px 4px 19px #333333;
box-shadow: 2px 4px 19px #333333;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=115, Color='#333333')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=115, Color='#333333');

显然对 IE 的影响是不同的，但是使用各种参数可以让您在每个浏览器上都非常接近（或至少可以接受）您的期望

【讨论】：

【解决方案2】：

box shadow 是 css3，在 ie8 和旧版浏览器中不支持，但我们仍然可以使用 css3pie 脚本获得它

【讨论】：

【解决方案3】：

也可以试试 prefixr.com，它对我的 css3 浏览器兼容很有帮助

【讨论】：