■対象フレームワーク■
jquery.js
■必要なプラグイン■
jquery.corner.js
■構文■
デフォルトの場合
角丸の大きさを指定する場合
$('#sample').corner("30px");/*全ての角に30pxの大きさ*/
角丸箇所と大きさを指定する場合
$('#sample').corner("top 30px"); /* id="sample"の要素に対して、左上、右上に30pxの大きさ */
$('#sample').corner("top 30px"); /* id="sample"の要素に対して、左上、右上に30pxの大きさ */
などとできる。
さらに個別に指定したいときは、
tl……左上コーナー、tr……右上コーナー
bl……左下コーナー、br……右下コーナー
で、指定できるので
$('#sample').corner("tl 30px"); /* id="sample"の要素に対して、左上に30pxの大きさ*/
などとできる。
class="sample2" に対して効果をかけたいときは、
$('.sample').corner("tl 30px"); /* class="sample2"の要素に対して、左上に30pxの大きさ */
と、cssと同じように記述する。
■参照サイト■
マジで簡単!!画像を使わず角丸を実現するjQuery Cornerbyバシャログ。