グラデーション背景を使用した IE9 で境界半径のにじみと影の不規則性を修正する方法

グラデーション背景を使用した IE9 での境界半径のにじみと影の不規則性への対処

Internet Explorer 9 では、ブラウザーは両方の境界半径 (角丸) と背景のグラデーションが利用可能です。ただし、これらの機能を組み合わせると、グラデーションが丸い角の外側に滲むという問題が発生しました。さらに、影の不規則性が観察されています。

解決策

IE9 は境界線の半径と背景のグラデーションの両方をネイティブにサポートしていますが、これらはシームレスに連携しません。にじみの問題を解決するための 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>

以上がグラデーション背景を使用した IE9 で境界半径のにじみと影の不規則性を修正する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。