HTMLが流動的である可能性があるHTMLの周りにドロップシャドウを作成するためのベストプラクティスは何ですか?
以前はテーブルを使用していて、外側の8つのセルのそれぞれの背景として8つのpng画像(4つの側面と4つの角)があり、中央のセルにドロップシャドウが必要です。あまりセマンティックではありませんが、少なくともドロップシャドウの画像は背景であり、流動的でした... htmlは醜く、退屈で、SEOにあまり適していませんでした。
現在、より互換性のある(ブラウザーの問題が発生したことをまったく覚えていませんが)方法はありますか、それともこれを処理するためのよりセマンティックな方法がありますか?
IE6は気にしません。私はjqueryを使用しているので、最新のブラウザー間で互換性の問題がない限り、javascript/jqueryメカニズムで問題ありません。
更新:CSS3のボックスシャドウを使用するという提案は素晴らしかった。唯一の問題は、適用されるhtml要素と同じサイズのボックスシャドウのみを実行することです。つまり、これは、(光源が真上にあるかのように)ドロップシャドウを周囲に配置できないことを意味します。少し大きい周囲のdivを追加できます。しかし、次に何が起こるかというと、境界半径によって、白いアーティファクトがコーナーに表示されます...
HTML要素からオフセットするだけでなく、HTML要素の周囲全体に素敵な黒い影を付ける方法はありますか?
更新2:CSS3のボックスシャドウとfirefox / webkitの実装はすべて、私が望むものを可能にするスプレッド値をサポートしています。以下のdynamicdrive.comリンクにはありませんでした。ありがとうございました。