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でバックグラウンドカラーなどで表示させたいと思っています。
※これは変更・妥協可。
●ボックスの中には文字などが入ります。
調べても考えても糸口が見つかりません。
もしご存知でしたら是非教えて下さい。
よろしくお願いします。
お礼
ありがとうございました。 とても参考になりました。 他の記事も勉強になりますね。