divコンテナに影を落とす？

Question

私は、複数の検索文字列の提案（Googleのような）の下にdivをポップする自動推薦付きの検索ボックスを持っています。 CSSを使って自動提案するボックスに影を落とすことは可能ですか、何らかの種類のスクリプトが必要でしょうか？私は背景画像を試しましたが、示唆の数は1から10または15まで変化する可能性があります。

可能であればIE6 +とFF2 +で動作するものを好むでしょう。ありがとう！

Answer 1

CSS3の属性はbox-shadowです。ブラウザの互換性を最大限に高めるには、現時点でベンダープレフィックスが必要です。

div.box-shadow { 
    -webkit-box-shadow: 2px 2px 4px 1px #fff; 
    box-shadow: 2px 2px 4px 1px #fff; 
} 

css3pleaseで利用できる発電機があります。

Answer 2

これを実行する最も幅広く互換性のある方法は、ボックス自体と同じサイズの2番目のdivを作成し、右下にいくつかのピクセルをナッジします。 JSを使ってそれを作成して配置することができます。これは、かなり現代的なフレームワークを使用している場合は難しくありません。

Answer 3

PNGドロップシャドウを使用できます。 IE6はそれをサポートしていませんが、うまく機能しません。

http://www.positioniseverything.net/articles/dropshadows.html

Answer 4

あなたはこれをしようとする場合があります。かなり簡単で、IE6やMozillaで動作するようです。

<div id ="show" style="background-color:Silver;width:100px;height:100px;visibility:visible;border-bottom:outset 1px black;border-right:outset 1px black;" ></div> 

一般的な構文は次のとおりです。 BORDER-〔postion]：[境界線スタイル] [ボーダー幅] [ボーダーカラー] |

利用できる[境界線のスタイル]のリストを継承することは、次のとおりです。

• が
• が
• ダブル
• 溝に隠れ
• を点在破線
• はめ込み
• なし
• outseこれはすべて私のブラウザで私の作品トン
• 尾根
• 固体継承

Answer 5

：

.shadow { 
-moz-box-shadow: 0 0 30px 5px #999; 
-webkit-box-shadow: 0 0 30px 5px #999; 
} 

そしてちょうど任意のdivのシャドウクラスを与え、何jQueryのは必要ありません。

Answer 6

.shadow { 
    -moz-box-shadow: 3px 3px 5px 6px #ccc; 
    -webkit-box-shadow: 3px 3px 5px 6px #ccc; 
    box-shadow:   3px 3px 5px 6px #ccc; 
}