IE9 で境界線の半径と背景のグラデーションのにじみを修正するにはどうすればよいですか?

IE9 での境界線の半径と背景のグラデーションのにじみを修正する

Internet Explorer 9 では、CSS3 を使用して角丸と背景のグラデーションを個別に実装できます。境界半径。ただし、これらの要素を組み合わせると、多くの場合、丸い角を超えてグラデーションがにじみます。

この問題を解決するには、次善策の 1 つとして、その寸法と角の丸い値が一致する、含まれる div 内でグラデーション要素をラップします。これは基本的に、目的の領域内にグラデーションを制限するマスクを作成します。

HTML:

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

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 */
}

このアプローチは、丸い角の境界でグラデーションのにじみをクリップすることにより、効果的にグラデーションのにじみをマスクします。ただし、基礎となるグラデーション コンテンツとの対話性に影響を与える可能性があることに注意することが重要です。

以上がIE9 で境界線の半径と背景のグラデーションのにじみを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。