CSSと画像で丸角

CSSと画像で作った丸角ウィンドウ？です。

特徴は以下のとおり

比較的すっきりしたHTML
内容に応じて横幅、高さは自動調節
Javascriptを使わない
丸角部分の背景が透過
使う画像は1つ

欠点はスタイルのwidthを指定した場合、

実際の横幅はwidthより8ピクセル大きくなってしまう

ということと、

丸角を透過にするためにCSSが汚くなっった

というところでしょうか。

デモ

ソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> * { padding : 0px; margin : 0px; } body { background-image : url(bg.gif); } .window { position : absolute; margin : 8px 0px 0px 8px; background : url(window.gif) no-repeat bottom right; } .window .caption { position : relative; top : -8px; background : url(window.gif) no-repeat top right; } .window h3 { position : relative; left : -8px; padding : 8px 0px 8px 8px; background : url(window.gif) no-repeat top left; font-size : 18px; font-weight : bold; } .window .contents { position : relative; left : -8px; padding : 4px 0px 8px 8px; margin-top : -8px; background : url(window.gif) no-repeat bottom left; } </style> </head> <body> <div class="window" style="left:12px; top:12px;"> <div class="caption" style="color:white;"><h3>丸角ウィンドウ</h3></div> <div class="contents"> <p>幅と高さは自動調節</p> <p>画像を変えれば簡単にデザインの変更可</p> <p>丸角部分の背景が透過</p> <p>widthを指定すると、実際の横幅はwidth+8になるので注意</p> </div> </div> </body> </html>