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ファイルを設置します。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!--[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ファイルの記述例はこんな感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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 で個別の角丸処理
要素の四隅の角丸の大きさ（半径）は自由に変更できますので、「左上、右上のみ角丸を適用させたい」という場合は、以下のように記述します。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!--[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の記述をした上で、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!--[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要素の背景に画像を指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
↓こんな感じで表示されます。
背景画像に角丸処理用させるデモ
コメント