画像を一切使わずにJavaScriptとCSSで角丸を表現するライブラリの紹介。
≫ruzee.com：ShadedBorder – JavaScript Round Corners with Drop Shadow
使い方はとてもシンプルです。
ライブラリファイル「shadedborder.js」をHTML上に貼り、
————————
<div id=”my-border”>
<p>～</p>
</div>
————————
といった形で<div>の括りを作成するのみです。
CSSで背景色（グラデなどの背景画像も可）、余白、フォント装飾など
指定すれば自動で角丸のボックスを生成してくれます。
角丸の丸味加減やボーダー線の太さドロップシャドウの調整などは
ソース上の下記のScript内で変更も可能です。
————————
<script language=”javascript” type=”text/javascript”>
var myBorder = RUZEE.ShadedBorder.create({ corner:8, shadow:16, border:1 });
myBorder.render(‘my-border’);
</script>
————————
試しに作ってみたものはこちら
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
角丸の為にわざわざ画像を作成する必要が無い利点と、
ドロップシャドウ具合いをPNGの自由が利かないIE6で綺麗に表現するのに
今後活用できそうです。