如何修复 IE9 中渐变背景的边框半径出血和阴影不规则问题？-css教程-PHP中文网

如何修复 IE9 中渐变背景的边框半径出血和阴影不规则问题？

Mary-Kate Olsen

发布： 2024-10-27 10:38:03

原创

915 人浏览过

How to Fix Border-Radius Bleeding and Shadow Irregularities in IE9 with Gradient Backgrounds?

使用渐变背景解决 IE9 中的边框半径出血和阴影不规则问题

在 Internet Explorer 9 中，浏览器支持边框半径 (圆角）和背景渐变可用。然而，在组合这些功能时，用户遇到了渐变溢出到圆角之外的问题。此外，还观察到了阴影的不规则性。

解决方案

虽然 IE9 本身可以支持边框半径和背景渐变，但它们不能无缝地协同工作。要解决出血问题，一种解决方案是将具有渐变和圆角的元素包裹在另一个 div 中。该外部 div 应具有与内部元素相同的大小和圆角值。通过将溢出设置为隐藏，可以创建遮罩效果，有效隐藏渐变溢出。

HTML

<code class="html"><div class="mask roundedCorners">
    <div class="roundedCorners gradient">
        Content
    </div>
</div></code>

登录后复制

CSS

<code class="css">.mask {
    overflow: hidden;
}

.roundedCorners {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.gradient {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0065a4', endColorstr='#a0cf67', GradientType=0); /* IE6-9 */
}</code>

登录后复制

以上是如何修复 IE9 中渐变背景的边框半径出血和阴影不规则问题？的详细内容。更多信息请关注PHP中文网其他相关文章！