Internet Explorer 9 で角が丸いグラデーション ブリーディングを防ぐ方法

IE9 境界線半径と背景のグラデーション: にじみの問題に対処する

Internet Explorer 9 (IE9) は、CSS3 境界線半径と背景の両方をサポートしますしかし、これらの機能を組み合わせるのは困難です。グラデーションが丸い角からにじみ出て、望ましくない視覚効果を生み出します。

問題を理解する

この問題を説明するために、次の画像を考えてみましょう。最初の画像は、予想される動作を示しています。グラデーションのにじみはありませんが、コーナーは鋭くなっています。 2 番目の画像は、グラデーションと角丸を組み合わせたときに発生するにじみを示しています。

[画像 URL: https://i.sstatic.net/lCBe6.png]

[画像 URL: https://i.sstatic.net/BbZ0D.png]

回避策: マスキング手法の使用

この問題の 1 つの回避策は、マスキング手法を使用することです。 。これには、グラデーションと丸い角を持つ要素の周囲にラッパー 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>

この回避策を使用すると、丸い角の外側ににじみ出るグラデーションがマスクによって非表示になり、にじみの問題が解決されます。

以上がInternet Explorer 9 で角が丸いグラデーション ブリーディングを防ぐ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。