ドロップシャドウの画像分割について

質問

ドロップシャドウの画像分割について

質問させて頂きます。
中のコンテンツによってサイズが変わらないボックスに、ドロップシャドウをつける場合

１：一枚の背景
２：「上部、縦シャドウ（繰り返し）、下部」（または横）と分化する
３：CSSのみでドロップシャドウを表示する

という選択肢があるとおもいますが、３は実際のサイトでは見たことがなく
さまざまなサイトでボックスの「背景を表示」してみると１と２が混在していました。

ボックスのサイズが変わるのであれば、画像を分割する必要があると思いますが
画像の転送量を減らすほかに、メリットやデメリットがあるのでしょうか？
また、CSSのみで表示することは実用に耐えられるものでしょうか？

わかり辛い質問で申し訳ありませんが、助言を頂ければ幸いです。

回答No.2

rurino · ベストアンサー

3.についてはCSS3からの実装なので、
IE系ではほとんど再現されません。

ブラウザシェアで、まだIE6/7/8を使用している方は多いので、
企業向けサイトを作ってる身なので、これらを無視することはまだむずかしいです。

残る1と2ですが、
自分は殆どの場合2を使います。
中のコンテンツに寄ってサイズが変わらないボックスといっても
ブラウザによっては添付画像くらいサイズが変わるものなので、
画像の高さが絶対に足りることはありえないと思っているので…

（添付画像は上：Firefoxの標準の文字サイズ、
下：Firefoxの文字サイズ変更で可能な限り文字サイズを上げてみたもの）

お礼

画像まで添付して頂いて、非常にわかりやすかったです。
諸事情によりIEをメインとしたページなので、２番で作ろうと思います

ありがとうございました！

回答No.1

345itati

CSSでのドロップシャドウは、ブラウザごとに対応が異なり、特に古いバージョンのIEに対応させることが面倒だった為に画像を作成して配置するほうが簡単だったのが理由だったのではないでしょうか。

お礼

回答ありがとうございます。
CSSでの対応は影の濃度などが違ってしまい、やはり不完全ですね。