cssで凝った角丸ボックスを作りたい。

質問

以下の条件を満たしたボックスをスタイルシートで作りたいのです。

●ほぼ全てのブラウザに対応させたい。
　・化石のようなブラウザは結構ですが、
　　IE、FireFox、ネスケ、Operaには
　　崩れる事なく表示できるようにしたいです。

●tableタグを使用したくない。
　・tableを使用せずにこのボックスを実現したいのです。

●幅や高さは固定ではなく％で指定したい。
　・ブラウザのウィンドウサイズによって変化させたいのです。

●角を丸く、その外側は透過させたい。
　・(bodyの)バックグラウンドカラーが凝っていて、％で指定したい為、
　　丸くさせた角の外側を透過させる必要があります。
　　参照1はかなり近いイメージなのですが、
　　角丸の外側が透過していません。(bodyのカラーと同じ色にしている)
　　ちなみにこれを透過させると上下のバックグラウンドカラーや
　　左右の縦にリピートしているバックグラウンドイメージが見えてしまいます。
　　（参照1）http://www.sovavsiti.cz/css/corners.html

●左から右へとグラデーションをかけたい。
　・希望しているボックスがグラデーションの為、
　　参照2の黄色の縦線のように太くしたボーダーではできない。
　　（参照2）http://phrogz.net/CSS/roundcorner.html

●影を付けたい。
　・右下に影を付けたいです。ちなみに角丸・影などの画像は自分で作成できます。

●画像はcssで表示させたい。
　・角丸やグラデーションなどの画像はhtmlにはimgタグを記述せず、
　　cssでバックグラウンドカラーなどで表示させたいと思っています。
　※これは変更・妥協可。

●ボックスの中には文字などが入ります。

調べても考えても糸口が見つかりません。
もしご存知でしたら是非教えて下さい。
よろしくお願いします。

回答No.1

steel_gray · ベストアンサー

現在検討中のCSS3ではブロックの角を丸くする、グラデーションをかける、テキストに影を付けるなどが検討されています。（ブロックへの影は・・なかったかも。）
しばらく待てば多くのブラウザで苦もなく実現できるようになるかもしれません。CSSはまだまだ過渡期なんです。
現在検討中ということは逆に現時点ではあまりよい方法はないということです。

divブロックを幾重にも重ねるとか、そうしたやり方で実現できるかもしれませんが、そうして装飾のためだけにタグを重ねる手法は本質的にテーブルをレイアウトに使うのと変わらない気がします。ってことで無理せずテーブルを使っちゃうか、意味がわかっていてテーブルを使うのを嫌っているのならできないものとして諦めるのがよいかと。

参考URL：

http://www.fromdfj.net/html/divsyndrome.html

お礼

確かにおっしゃるとおりですね。
今まではそんな事無かったのに、
“角を丸くしたい”と思う心が
病を発症させてしまったようです。
ありがとうございました。