てとら
2010年06月14日
18:21
※※※HTMLなにそれ、CSSなにそれな人はいじらないでください※※※
そろそろ、本格的にCSS3とHTML5が動き出しそうだな・・・なんて。
でも、IE8までは完全にアウト!ですが・・・。
IEのCSS3対応は、IE9からです。
ちなみに、CSS3だと、背景画像を使わずにグラデーションできたり
なんだかスッゴイことになってます。
とりあえず、CSSだけで角丸ボックスができるコード
↓↓↓
-moz-border-radius: 5px;
//FireFox
-webkit-border-radius: 5px;
//Safari-chrome
border-radius: 5px;
//CSS3
これを、角を丸めたいクラスなりIDなりに指定してあげれば反映されます。
どんどん便利になっていくなぁ・・・。
画像を使ってコーナーを丸くするのに挫折しちゃった方お試しあれw
ちなみに、右上だけ丸めたいとかそういう指定もできちゃいますよ。
px数を大きくすれば、ほぼ楕円形や円形も可能。
余談。
クロスブラウザの角丸を実装したい場合には
(CSS3未対応なブラウザ対応)
border-radius.htcファイルをダウンロードして
CSSに下の一文つっこめば反映されます。
behavior: url(border-radius.htc);
border-radius.htcは、実際にアップした場所のアドレスを入れないといけないので
階層が下にあった場合には、そこから。
確実なのは絶対パスで指定してあげることだと思います。
※マメだとこれアップできないとおもうので、IE系統はとりあえず、あきらめた方がいいかもしれない。