internet-explorer-9 - IE9 border-radius 和 background gradient bleeding

Question

IE9 显然能够通过使用 border-radius 的 CSS3 标准定义来处理圆 Angular 。

如何支持边框半径和背景渐变？是的，IE9 将分别支持它们，但如果将两者混合使用，渐变会从圆 Angular 溢出。

我还看到阴影在圆 Angular 框下显示为黑色实线的奇怪现象。

IE9中显示的图片如下:

我该如何解决这个问题？

Answer 1

我也一直在处理这个问题。另一个“解决方案”是在具有渐变和圆 Angular 的元素周围添加一个 div。使该 div 具有相同的高度、宽度和圆 Angular 值。将溢出设置为隐藏。这基本上只是一个面具，但对我有用。

HTML:

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

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 */
}