[JS]IE8 以下で角丸を使えるjQuery プラグイン「jQuery curvyCorners」｜jQueryプラグイン・ライブラリ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

[JS]IE8 以下で角丸を使えるjQuery プラグイン「jQuery curvyCorners」

IE7 IE8 border-radius jQuery curvyCorners

スポンサード

CSS3 の border-radius を使えば簡単に角丸を実現できますが、CSS3 が対応していないIE8 以下でも角丸を使えるようにするjQuery プラグインが「jQuery curvyCorners」です。

jQuery curvyCorners は要素の四隅の半径を個別に指定できるだけでなく、背景画像に対しても角丸を適用させることができますので、

個人的には、IE9 とその他のモダンブラウザにはCSS3 の border-radius で角丸を指定した上で、IE8 やIE7 でも角丸に対応しないといけない…という場合にだけjQuery curvyCorners を利用しています。

jQuery curvyCorners ダウンロード

以下のページより jQuery curvyCorners のファイルをダウンロードします。
※バージョンは、2013年現在で最新版である2.1.1 を利用します。

jQuery Curvy Corners

jQuery curvyCorners の設置

<head> 内にcurvycorners.src.js ファイルを設置します。

<!--[if lt IE 9]>
<script src="./curvycorners.src.js"></script>
<script>
curvyCorners.addEvent(window, 'load', initCorners);
function initCorners() {
    var settings = {
		tl: { radius: 10 },
		tr: { radius: 10 },
		bl: { radius: 10 },
		br: { radius: 10 },
		antiAlias: true
    }
    curvyCorners(settings, ".box");
}
</script>
<![endif]-->

この場合、box の要素に対して四隅に10px の角丸を適用させることになります。

続いてHTML、CSS ファイルの記述例はこんな感じです。

<style>
.box	{
	background:#dd0000;
	color:#fff;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}
.box p	{
	padding:20px 10px;
	text-align:center;
}
</style>

<div class="box"><p>角丸にします。</p></div>

jQuery curvyCorners はIE8 以下に適用させるようにしていますので、CSS ファイル内で.box 要素にも同じ半径だけ border-radius を指定しています。

以下のデモページで角丸を確認できます。
jQuery curvyCorners による基本的な角丸のデモ

jQuery curvyCorners で個別の角丸処理

要素の四隅の角丸の大きさ（半径）は自由に変更できますので、
「左上、右上のみ角丸を適用させたい」
という場合は、以下のように記述します。

<!--[if lt IE 9]>
<script src="./curvycorners.src.js"></script>
<script>
curvyCorners.addEvent(window, 'load', initCorners);
function initCorners() {
    var settings = {
		tl: {radius: 30 },
		tr: {radius: 30 },
		bl: false,
		br: false,
		antiAlias: true,
		autoPad: true,
    }
	curvyCorners(settings, ".box");
}
</script>
<![endif]-->

「tl」「tr」「bl」「br」など、各種オプションは以下の通りとなっています。

tl	左上の半径
tr	右上の半径
bl	左下の半径
br	右下の半径
antiAlias	アンチエイリアス設定
autoPad	パディング設定

角丸を指定する場所には {radius:半径} を記述し、角丸を指定しない場所は false にします。
※false にすることで正常に表示されない場合は、{radius: 0 } にします。
四隅に個別に角丸を適用させるデモ

背景画像に角丸処理

background-image で指定した背景画像にも角丸を適用できます。

背景画像の四隅に20px の角丸を適用させる場合は、以下のようなjavascript の記述をした上で、

<!--[if lt IE 9]>
<script src="./curvycorners.src.js"></script>
<script>
curvyCorners.addEvent(window, 'load', initCorners);
function initCorners() {
    var settings = {
		tl: { radius: 20 },
		tr: { radius: 20 },
		bl: { radius: 20 },
		br: { radius: 20 },
		antiAlias: true
    }
	curvyCorners(settings, ".box");
}
</script>
<![endif]-->

.box 要素の背景に画像を指定します。

<style>
.box		{
	background:url(./images.jpg) no-repeat top center;
	width:640px;
	height:480px;
	text-align:center;
	margin:0 auto;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	border-radius:20px;
}
</style>

<div class="box"></div>

↓こんな感じで表示されます。
背景画像に角丸処理用させるデモ

スポンサード