html - 圆 Angular CSSPIE + CSS 渐变

Question

我们在使用下面的代码时遇到了问题。它只是一个带有圆 Angular 和渐变的基本框(我们将 CSSPie 应用于它)。我们注意到在所有 IE 中，由于渐变(饼图不起作用)，我们无法在 IE 中保留该元素的圆 Angular 。有没有人遇到过这个解决方案？我们很乐意将我们的渐变完全从 photoshop 迁移到 CSS，但这被证明是一个恼人的问题!

谢谢!!

    .superduper {
    position: relative;
    width: 100px;
    height: 100px;
-webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    background: #ff0000 url("gradient-bg.png") repeat-x top;
    -o-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    *background: #ff0000;
    background: #ff0000\0/;
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#FF00ff00, endColorstr=#FFff0000);

    background-image: -webkit-gradient(
        linear,
        left top, left bottom,
        from(#00ff00),
        to(#ff0000)
    );
    background-image: -webkit-linear-gradient(
        top,
        #00ff00,
        #ff0000
    );
    background-image: -moz-linear-gradient(
        top,
        #00ff00,
        #ff0000
    );
    background-image: -o-linear-gradient(
        top,
        #00ff00,
        #ff0000
    );
    background-image: linear-gradient(
        top,
        #00ff00,
        #ff0000
    );
}

Answer 1

这是因为您正在使用 IE 专有的“过滤器”属性。由于 IE 呈现过滤器的方式，它绘制了整个元素框，覆盖了圆 Angular 。

您应该删除 filter 属性，并在 -pie-background 属性中指定线性渐变。这将允许 PIE 渲染渐变并遵循 border-radius。

有关此操作的示例，请参阅 css3pie.com 主页(选中“显示 CSS”复选框以查看生成的代码。)

例如-饼图背景:线性渐变(顶部，#00ff00，#ff0000)；