2010.04.18

疑似要素で角丸ボックス

:before および :after 擬似要素のcontentプロパティで、画像を使った角丸ボックスを作る方法を学習しました。
6年前wの雑誌に載っていたネタなんですが、ようやく疑似要素対応のブラウザもでそろってきたかと。css3に追いつかれてますけど、css3を使えない場合やちょっとした装飾画像を追加するのにも応用できます。
サンプルと解説

IE7以前もまだありますが、この方法だと角丸に表示されないだけでボックスの幅、高さはそのまま維持されます。
どうしても全てのブラウザで角丸を表示したいのでなければ、便利な方法ではないかと思います。

対応ブラウザ Safari, FireFox, IE8, (Opera, chrome 未確認ですが行ける予感)

“疑似要素で角丸ボックス”へ 1 件のコメント

  1. Oじろー(管理してる人) より:

    大変です! Netscape7.0.2でも正しく表示されます!!
    さすがMozillaベース…
    Natscape7今でもわりと崩れなく見られます。
    なんの対策も講じてない我がサイトも一部崩れ(たぶん、クリアフィクスがらみ)と、javaを使ったナビ部分に乱れ(クリックすると治る!)がありますが、おおむね良好!
    ただ今となっては、文字のシャギー感が悲しくて、使いませんが…。

コメントをどうぞ



PageTop