角丸作成javascript「curvyCorners」

角丸作成javascriptは多くありますが、ライブラリに依存しないのはあまりありませんでした。
curvyCornersは単一スクリプトで角丸を実現できるjavascriptです。
CurvyCorner

使用方法
curvyCornersからファイル群をダウンロードし、以下のように記述します。
<script type="text/javascript" src="http://yourdomain/rounded_corners_lite.inc.js"></script>
<script type="text/javascript">
window.onload = function()
{
settings = {
tl: { radius: 70 }, //左上の半径
tr: { radius: 20 }, //右上の半径
bl: { radius: 10 }, //左下の半径
br: { radius: 20 }, //右下の半径
antiAlias: true, //アンチエイリアス
autoPad: true //オートパディング
}
var myBoxObject = new curvyCorners(settings, "class名");
myBoxObject.applyCornersToAll();
}
</script>

あとはclass名でコンテンツを囲めば完了です。
なお、角丸作成javascript「curvyCorners」サンプルでは以下のようなCSSを指定しています。
<style type="text/css">
.class名 {
margin: 50px 0 0;
color: #ffffff;
width: 60%;
padding: 20px;
background-color: #333;
}
</style>

sponsors

「角丸作成javascript「curvyCorners」」をシェアする

記事作成:
記事URL:

TOP > > > 角丸作成javascript「curvyCorners」