[JS]div要素に角丸やフェードのボーダーをスタイリングするスクリプト -DivCorners

div要素で配置した矩形に、シンプルなボーダーや角丸、フェードのボーダーをスタイリングするスクリプトをroydukkeyから紹介します。

デモのキャプチャ

DivCorners
デモページ

ボーダーは矩形の内側と外側に指定して配置することが可能で、ボーダー自体の幅や高さを指定してスタイリングすることができます。
上記キャプチャは、外側(outside)のデモです。

スクリプトの現在の仕様では、角丸やフェードのボーダーには画像が使用されており、下記のイメージで実装されています。

実装のイメージ

実装のイメージ

スクリプトの将来のバージョンでは、画像無しのスタイリングも加わる予定とのことです。

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

sponsors

top of page

©2018 coliss