2010.04.18

疑似要素で角丸ボックス

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

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

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

PageTop