[JS]クロスブラウザ対応の画像を使わずに角丸を生成するスクリプト -corners.js

画像を使わずに、パネルの四隅を角丸にする軽量のスクリプトをthe css blogから紹介します。

Creating rounded corners (the "Deviant art's" way)
demo

パネルのHTML箇所は、下記のようになります。

<div class="cornerBox" id="cBox1">
<div class="cornerBox-content">パネル</div>
</div>

各classは固定で、idを指定することで同一ページに異なるデザインの角丸を指定できます。

対応ブラウザは、IE6/7/8, Fx, Op, Safari, Chromeとのことです。

スクリプトはjQueryのプラグインのため、実装にはjquery.jsが必要です。

Post on:2009年7月6日