1

以下のコードを使用しているという問題があります。角が丸く、グラデーションが付いた基本的なボックスです（CSSPieを適用します）。すべてのIEで、グラデーションが原因でこの要素の角を丸く保つことができないことに気づきました（円は機能しません）。誰かがこれに対する解決策に出くわしましたか？グラデーションをフォトショップから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
    );
}
4

2 に答える 2

2

これは、IE独自の「filter」プロパティを使用しているためです。IEはフィルターをレンダリングする方法のため、要素ボックス全体をペイントします。これにより、角の丸みが覆われます。

filterプロパティを削除し、-pie-backgroundプロパティで線形グラデーションを指定する必要があります。これにより、PIEはグラデーションをレンダリングし、境界半径を尊重することができます。

この動作の例については、css3pie.comホームページを参照してください（生成されたコードを表示するには、[CSSを表示]チェックボックスをオンにします）。

例：-pie-background：linear-gradient（top、＃00ff00、＃ff0000）;

于 2011-08-02T21:44:36.183 に答える
0

この代替手段はまったく新しいものです：https ：//github.com/bfintal/jQuery.IE9Gradius.js

スクリプトをheadタグの最後に含めるだけで、残りを処理できます。READMEノートを参照してください

于 2011-09-14T10:33:20.743 に答える