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

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

タブに角丸を実装したキャプチャ

Roundcorners Canvas
デモページ

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

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

1pxの角丸のキャプチャ

1pxの角丸のサンプル

border colorのキャプチャ

border colorのサンプル

背景色のキャプチャ

背景色のサンプル

背景画像のキャプチャ

背景画像のサンプル

ネストされたdivのキャプチャ

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

lineのキャプチャ

lineのサンプル

四辺で異なる角丸のキャプチャ

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

tableのキャプチャ

tableのサンプル

インライン要素のキャプチャ

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

エフェクトのキャプチャ

エフェクトのサンプル

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

sponsors

top of page

©2018 coliss