[JS]角丸を簡単な記述で実装するスクリプト -Roundcorners Canvas

Roundcorners Canvasは、タブ・ボタン・テーブルなどの矩形に、簡単な記述で角丸を実装できるスクリプトです。

上記のキャプチャ画像のように、divの矩形(赤の箇所)と、リストのタブ(Lookの箇所)を角丸にするには、下記のコードを使用します。

$(document).ready(function() {
	$("#mainblock").corner("30px");
	$("#menu ul li").corner("8px top");
});

Roundcorners Canvasは、ほかにも多様な角丸を実装することができます。

1pxの角丸のサンプル

border colorのサンプル

背景色のサンプル

背景画像のサンプル

ネストされたdivのサンプル

lineのサンプル

四辺で異なる角丸のサンプル

tableのサンプル

インライン要素のサンプル

エフェクトのサンプル

Roundcorners CanvasはjQueryのプラグインのため、実装にはjquery.jsが必要です。

Post on:2008年3月10日

thanks, Rick!