IE8 的 CSS3 盒子阴影效果？答案

【问题标题】：CSS3 Box Shadow Effect for IE8?IE8 的 CSS3 盒子阴影效果？
【发布时间】：2012-07-12 05:44:08
【问题描述】：

我有以下风格来获得这种效果：

它适用于 IE9 和 Chrome，但不适用于 IE8。我应该改变什么才能让它在 IE8 中工作。

请注意，我已将此样式应用于封装图像的标签。

 border-collapse: separate !important;
 box-shadow: 0px 0.5px 11px 4px #888888;

【问题讨论】：

IE8 不支持box-shadow。你能得到的最接近的是glow 过滤器，相信我，没有比这更丑陋的东西了。
@minitech 你可以像在 CSS3PIE 中那样使用 VML-polyfill。

标签： html css internet-explorer-8

【解决方案1】：

IE8 本身不支持box-shadow。为此，您可以使用惊人的 CSS3 PIE 库。

但请注意，这并不能完全复制 box-shadow。主要是，如果你的图片有任何透明度，元素后面的阴影就会漏出来：

与其他浏览器不同，PIE 渲染的阴影形状在元素背景后面的区域是不透明的。这意味着如果您的元素具有透明或半透明的背景，则不透明的阴影将显示出来。为了避免这种情况，你必须 [..] 给元素一个不透明的背景

见：http://css3pie.com/documentation/supported-css3-features/#box-shadow

【讨论】：

【解决方案2】：

您可以使用 IE 特定的 filter css 规则来实现这一点并完全放弃 CSS3PIE。

这将为您提供接近您正在寻找的东西。

filter: 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=0,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=45,strength=2), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=90,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=180,strength=10), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=225,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=270,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=315,strength=2);

可以在这里查看演示：http://hedgerwow.appspot.com/demo/shadow

有关 IE 过滤器的更多信息，请参阅这篇 MSDN 文章：http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx

这些过滤器中的许多过滤器自 IE4 以来就已受支持，远早于 css2，当时还没有浏览器完全支持 CSS1。因此，如果您认为辉光滤镜看起来很难看，请归咎于 1997 而不是微软。 ;)

【讨论】：

【解决方案3】：

CSS3PIE 是你在这个问题上的朋友，去试试吧但要小心在 IE8 上使用它

由于 PIE 与其他一些 javascript 的冲突，我现在正面临着 IE8 崩溃的问题

【讨论】：