2010.04.18
疑似要素で角丸ボックス
:before および :after 擬似要素のcontentプロパティで、画像を使った角丸ボックスを作る方法を学習しました。
６年前ｗの雑誌に載っていたネタなんですが、ようやく疑似要素対応のブラウザもでそろってきたかと。css3に追いつかれてますけど、css３を使えない場合やちょっとした装飾画像を追加するのにも応用できます。
サンプルと解説
IE７以前もまだありますが、この方法だと角丸に表示されないだけでボックスの幅、高さはそのまま維持されます。
どうしても全てのブラウザで角丸を表示したいのでなければ、便利な方法ではないかと思います。
対応ブラウザ Safari, FireFox, IE8, （Opera, chrome 未確認ですが行ける予感）
スポンサーリンク
大変です! Netscape7.0.2でも正しく表示されます！！
さすがMozillaベース…
Natscape7今でもわりと崩れなく見られます。
なんの対策も講じてない我がサイトも一部崩れ（たぶん、クリアフィクスがらみ）と、javaを使ったナビ部分に乱れ（クリックすると治る！）がありますが、おおむね良好！
ただ今となっては、文字のシャギー感が悲しくて、使いませんが…。