7

同じ要素にグラデーション効果と境界線半径を使用しようとしていますが、それらの間に競合があります。グラデーションは正常に機能しますが、境界線の半径が機能しなくなります。

これがスクリプトです

.selector {
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4317',endColorstr='#891a00');
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.htcファイルは使いたくない。

これは、フィルターと境界半径の間の既知の問題ですか？

ありがとう。

4

2 に答える 2

7

SVG グラデーションを使用できます。IE9 で動作する例を次に示しますborder-radius: http://jsfiddle.net/thirtydot/Egn9A/

SVG グラデーションを生成するには、http: //www.colorzilla.com/gradient-editor/を使用します。IEの他のブラウザ/バージョンで動作させようとすることについては言及していませんが、それがあなたがやろうとしていることである場合（あなたが使用しているためかもしれませんfilter）、「IE9サポート」セクションで説明されている方法を使用してください.

SVG グラデーションを生成する別のサイト: http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

于 2012-05-01T15:26:43.083 に答える
3

これらのクラスを境界線の半径とグラデーションに使用します

HTML コード:

<div class="box-radius ">border radius with gradient</div>

CSS コード:

.box-radius {
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
             -o-border-radius: 5px;
                border-radius: 5px;  
        /* behavior: url(border-radius.htc); */
    }

.gradient {
    background-image: -moz-linear-gradient(top, #ff4317, #891a00); /* Firefox 3.6 */
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #ff4317),color-stop(1, #891a00)); /* Safari & Chrome */
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff4317',endColorstr='#891a00'); /* IE6 & IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff4317',endColorstr='#891a00')"; /* IE8 */
于 2014-02-11T10:29:45.167 に答える