IE 中的 CSS3 阴影强化圆角 div 角

发布于 2024-12-12 00:14:49 字数 470 浏览 0 评论 0原文

当我在 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

指尖上的星空 2024-12-19 00:14:49

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 old filter 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 the filter 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文