IE9 は、CSS3 標準定義を使用して丸い角を処理できるようですborder-radius。
境界半径のサポートはどうですかそして背景のグラデーション? はい、IE9 では両方を個別にサポートしますが、2 つを混在させると、グラデーションが丸い角からにじみ出てしまいます。
また、角が丸いボックスの下に、影が黒い実線として表示されるという奇妙な現象も見られます。
IE9 で表示される画像は次のとおりです。
この問題を回避するにはどうすればいいでしょうか?
ベストアンサー1
私もこの問題に取り組んでいます。別の「解決策」は、グラデーションと丸い角を持つアイテムの周囲に div を追加することです。その div の高さ、幅、丸い角の値を同じにします。オーバーフローを非表示に設定します。これは基本的に単なるマスクですが、私の場合はうまくいきます。
HTML:
<div class="mask roundedCorners">
<div class="roundedCorners gradient">
Content
</div>
</div>
CS: ...
.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 */
}