jQueryプラグインで画像を使わず角丸にするjquery.curvycorners.packed.js | ウェブデザイナー的ホームページ制作最適化

jQueryで角を丸くするプラグインです。CSSで角を丸する場合は、角丸の画像を作成してCSSの背景に画像を設置する感じで作成しますがjQueryを使って作成すれば、画像を作成する手間が省けますね！！しかも細かい設定もできます♪

デモ

配布ページからダウンロード。

HEADER部分に

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.corner.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(
	function() {

		$('.corner-box').corner();

		$('.corner-box2').corner({
			tl: { radius: 24 },
			tr: false,
			bl: false,
			br: { radius: 24 },
			antiAlias: true,
			autoPad: true,
			validTags: ["div"] });
	});
</script>
<div class="corner-box">
<p>デフォルト設定の場合は、こんな感じに表示されます。デフォルト設定の場合は、こんな感じに表示されます。デフォルト設定の場合は、こんな感じに表示されます。デフォルト設定の場合は、こんな感じに表示されます。デフォルト設定の場合は、こんな感じに表示されます。</p>
</div>

<div class="corner-box2">
<p>ある特定の部分だけ角丸にしたり、角丸の大きさも自由に決められます。ある特定の部分だけ角丸にしたり、角丸の大きさも自由に決められます。ある特定の部分だけ角丸にしたり、角丸の大きさも自由に決められます。ある特定の部分だけ角丸にしたり、角丸の大きさも自由に決められます。ある特定の部分だけ角丸にしたり、角丸の大きさも自由に決められます。</p>
</div>