hamashun.com

WWW WATCHさんの角丸に関するあれこれを見ていて、そういえばcontentプロパティを使う方法があったなーと思い出したのでエントリします。
この方法を使えば、XHtml側に余計な要素を追加しないで、かつCSSのみで角丸が可能になります。

サンプル

ソース

div#circle {
 width:500px;
 height:auto;
 margin:0 auto;
 background:#aaf;
}

div#circle:before {
 display:block;
 content:url(tl.png);
 line-height:0;
 background: url(tr.png) no-repeat top right;

}

div#circle:after {
 display:block;
 content:url(bl.png);
 line-height:0;
 background:url(br.png) no-repeat bottom right;
}

p {
 background:#aaf;
 margin:20px;
}

====================================================

<div id="circle"><p>CSSのみで余計な要素を加えずに、角丸にしています。</p></div>

CSS側の解説

最初のブロックは、普通にdivのwidthやbackgroundを指定しています。 ここは特別な事はしていません。

ポイントは次のブロックから。 divに:before擬似要素を指定しておきます。
backgroundに右上の画像（ここではtr.png）を指定し、no-repeat top rightとします。
contentプロパティに左上の画像（ここではtl.png）を指定する事で、divの直前に画像を表示する事ができます。
ここで気をつけたいのは、display:blockを指定しておく事です。

次の:afterのブロックも、やっている事は同じです。
動作を感覚的に説明すると、display:blockでcontentのスペースを確保して、そこに画像を捻じ込ませているといった感覚でしょうか。
なお、:beforと:afterの両方に指定しているline-height:0;が無いと、表示が崩れるのでご注意ください。

XHtml側の解説

XHtmlは非常にシンプルです。 特に解説はいらないと思います。

デメリット

FirefoxやOperaでは正常に表示されますが（多分safariも）、IEでは通常の四角いBOXで表示されます(IE7ですら！）。
しかし、内容（情報）は全く変わり無いので、構造上は問題ありません。

まとめ

余計な要素を追加せずに済むのはかなりいい感じです。 CSSのみで済むのも手軽。
div#circleのbackgroundには画像を指定していないので、中に別の画像を指定できる点もグーです。
:befor :after擬似要素とcontentプロパティは、もっと色々な使い方ができそうな気がします。 また何か面白い使い方があったらエントリしてみたいと思います。