Border-Radius を使用するときに IE9 で背景のグラデーションのにじみを防ぐ方法は?

IE9 の境界半径と背景のグラデーション ブリード: 難問

IE9 が CSS3 標準を使用して境界半径をサポートしていることは広く知られています。ただし、これらの丸い角を背景のグラデーションと組み合わせると、予期せぬ問題が発生します。グラデーションが湾曲したエッジを超えてにじんでしまいます。

解決策: マスキング技術の採用

回避策の 1 つは、マスクとして機能する追加の div を使用することです。実装方法は次のとおりです:

1. マスキング Div を追加します: 要素を角丸とグラデーションの両方で新しい div でラップします。
2. Set Div 属性: マスキング div に内部要素と同じ高さ、幅、境界半径の値を与えます。
3. オーバーフローを隠す: マスキング div のオーバーフロー プロパティを次のように設定します。 hidden。

これにより、丸い角はそのままにしながら、グラデーションのにじみを隠すマスクが作成されます。

HTML および CSS コード:

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

<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>

このマスキング手法を利用すると、グラデーションのにじみの問題を克服し、IE9 で目的の効果を実現できます。

以上がBorder-Radius を使用するときに IE9 で背景のグラデーションのにじみを防ぐ方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。