IE 中的 CSS3 阴影强化圆角 div 角
当我在 div 上仅使用圆角时,它看起来就像我在 IE9 中所期望的那样。
border-radius: 7px;
但是,当我添加以下行来制作阴影时,我得到了意想不到的效果:
filter: progid:DXImageTransform.Microsoft.Shadow(color='#818181', Direction=135, Strength=3);
这是效果的屏幕截图。我指的是突然附加到我的浅蓝色 div 上的丑陋的小黑角:
http://imageshack.us/photo/my-images/406/blackcorners.png/
我怎样才能摆脱它?
When I use only rounded corners on my div, it looks about how I expect in IE9.
border-radius: 7px;
However, when I add the following line to make a drop shadow, I get an unexpected effect:
filter: progid:DXImageTransform.Microsoft.Shadow(color='#818181', Direction=135, Strength=3);
Here's a screenshot of the effect. I'm referring to the ugly little black corners suddenly appended to my light blue div:
http://imageshack.us/photo/my-images/406/blackcorners.png/
How can I get rid of that?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
IE9 原生支持
box-shadow
,因此无需使用旧的filter
样式。如果您为了旧版 IE 的利益而使用
filter
,那么这两个阴影可能会在 IE9 中发挥作用,并且略有不同,从而导致奇怪的效果。我的第一个建议就是放弃
filter
样式。这意味着 IE 版本不会看到框阴影,但它并不是布局的真正关键元素。如果这不好,那么我建议使用 CSS3Pie 为旧版本的 IE 实现框阴影。作为奖励,它也会执行
border-radius
。使用 CSS3Pie,您可以在旧版本的 IE 中使用标准 CSS
box-shadow
样式,而无需担心filter
样式。而且,为了展示它如何直接回答您的问题,它会在 IE9 中自动关闭,因此您不会获得双阴影效果。希望有帮助。
IE9 supports
box-shadow
natively, so there's no need to use the oldfilter
style.If you're using the
filter
for the benefit of older IE versions, then it may be that both shadows are coming into play in IE9, and slightly different, thus causing the weird effect.My first suggestion is simply to drop the
filter
style. This will mean that versions of IE won't see the box shadow, but it's not really a critical element of the layout.If that's no good, then I would suggest using CSS3Pie to implement the box shadows for older versions of IE. As a bonus, it'll do the
border-radius
too.With CSS3Pie, you can use the standard CSS
box-shadow
style in older versions of IE, and not need to worry about thefilter
style. And, to show how it directly answers your question, it will switch itself off automatically in IE9, so you won't get the double shadow effect.Hope that helps.