角丸作成javascript「curvyCorners」

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

sponsors

使用方法

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

サンプル

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi est, cursus sit amet, pellentesque et, ultricies a, ipsum. Nulla facilisi. Sed quis lacus. Aenean ut risus et lectus blandit gravida. Nam sed nunc. Aliquam non felis non diam aliquam gravida. Phasellus quis sem. Curabitur at velit. Vivamus libero velit, condimentum sit amet, tempus ut, aliquam sit amet, velit. Nunc hendrerit ante. Quisque egestas feugiat erat. Morbi tellus.

sponsors

Javascriptサンプルページ一覧
skuare.net