角の丸い要素を作る方法 ～ curvyCorners

はじめに

画像を使わないで DIV 要素の角を丸く表示するためのライブラリは curvyCorners からダウンロード可能です。

サンプルは次の通り:

このように角が丸くなります。

背景画像を設定することにより、次のように画像の角を丸く表示することも可能です。

コードの書き方

上記のコードは書きの通りです。window の load イベントでパラメータを 設定するために、Event.observe を利用しています。ご存知の通り(?)、 これは prototype.js の機能です。

下のコードでは curvyCorners のコンストラクタに設定 settings と 設定を適用するクラス名 "rounded" を渡しています。

	<style type="text/css">

	.rounded {

		text-align: left;
		background: #ffcc66;
		padding: 10px;
	}

	.rounded_img {

		background-image: url(testimg1.jpg);
		background-repeat: no-repeat;

	}

	</style>

	<script type="text/javascript" src="../js/prototype.js"></script>
	<script type="text/javascript" src="../js/rounded_corners.inc.js"></script>	
	<script type="text/javascript">

	Event.observe(window,'load',window_onload,false);

	function window_onload(evt){

		settings = {
			tl: { radius: 10 },
			tr: { radius: 10 },
			bl: { radius: 10 },
			br: { radius: 10 },
			antiAlias: true,
			autoPad: true,
			validTags: ["p"]
		};

		var rounded_boxes = new curvyCorners(settings, "rounded");
		rounded_boxes.applyCornersToAll();

		var rounded_imgs = new curvyCorners(settings, "rounded_img");
		rounded_imgs.applyCornersToAll();

	}

	</script>