アフィリエイト情報.net >CSS,JavaScript,画像で角を丸くする方法
CSSで角をもっと丸くする方法いろいろ、 画像を使わず、角にアンチエイリアスをかけて丸くする「curvyCorners」を参考にしました。
2006年8月19日追記。参考リンク。角丸にチャレンジ - JavaScript編、 角丸にチャレンジ - 透過PNG画像＋CSS編、 角丸にチャレンジ - JavaScript編。
2006年7月18日作成
直接imgタグで画像を表示させる方法もありますが、ここで挙げてているものは、いずれもスタイルシート(CSS)を使って、 backgroundに画像を指定しています。影や、装飾が入った画像を使うことでいろいろな表現ができます。
MODx Content Management System | Simple Rounded Corner CSS Boxes
Another attempt at CSS rounded-corner dialogs using the sliding doors technique
Dragon Labs | The Octopus Engine
CSSファイルで背景画像を計8点指定。 サンプルの画像はダウンロードできます。 この方法だと、divを何重にも重ねる必要があります。下の方にJavaScriptを使ったバージョンもあります。(IEだとうまく表示されない場合も…)
画像を使わないで、スタイルシート（CSS）だけで角(かど)を丸める方法。 以下の二つの方法の場合、JavaScriptを使っていないため、余分なタグがソースに増えてしまう。 (この場合は、bタグ。)
stu nicholls | CSS PLaY | snazzy borders
この方法でもbタグが沢山必要です。 CSSファイルのみ必要です。
以下の方法では、JavaScriptを使っています。 上のやり方に比べると、HTMLファイル自体はシンプルになりますね。
JavaScriptでwindow.onloadの設定が必要になります。
Nifty Corners Cube - freedom to round
niftycube.jsとniftyCorners.cssが必要。 niftyLayout.jsとNiftyLayout.cssもあり。 JavaScript、window.onloadの設定が必要。 (関連情報： More Nifty Corners | Articoli Webdesign | Webdesign.HTML.it、 Anti-aliased Nifty Corners - Acko.net - Steven Wittens ）
上の「Octopus Engine」のJavaScript版。
Dragon Labs | The Octopus Engine
octopus.jsと画像の準備が必要。 class名を「octopus ＊＊」にすると角が丸くなります。
