IE 中的 CSS3 阴影使 div 圆角变硬答案

【问题标题】：CSS3 shadows in IE harden rounded div cornersIE 中的 CSS3 阴影使 div 圆角变硬
【发布时间】：2011-10-26 08:15:34
【问题描述】：

当我在我的 div 上只使用圆角时，它看起来与我在 IE9 中的期望差不多。

border-radius: 7px;

但是，当我添加以下行来制作投影时，我得到了意想不到的效果：

filter: progid:DXImageTransform.Microsoft.Shadow(color='#818181', Direction=135, Strength=3);

这是效果的截图。我指的是我的浅蓝色 div 上突然附加的丑陋的小黑角：

我怎样才能摆脱它？

【问题讨论】：

【解决方案1】：

IE9 原生支持box-shadow，因此无需使用旧的filter 样式。

如果您使用filter 是为了让旧版 IE 受益，那么这两种阴影可能都在 IE9 中发挥作用，并且略有不同，从而导致奇怪的效果。

我的第一个建议就是放弃filter 样式。这意味着 IE 版本不会看到框阴影，但它并不是布局的真正关键元素。

如果这不好，那么我建议使用CSS3Pie 为旧版本的 IE 实现框阴影。作为奖励，它也会执行border-radius。

借助 CSS3Pie，您可以在旧版本的 IE 中使用标准 CSS box-shadow 样式，而无需担心 filter 样式。而且，为了显示它如何直接回答您的问题，它会在 IE9 中自动关闭，因此您不会获得双阴影效果。

希望对您有所帮助。

【讨论】：