web-dev-qa-db-ja.com

divコンテナーに影を落としますか？

複数の検索文字列の提案（googleなど）でその下にdivをポップアップする自動提案機能付きの検索ボックスがあります。 CSSを使用して自動提案ボックスにドロップシャドウを設定することは可能ですか、それとも何らかのスクリプトが必要ですか？背景画像を試しましたが、候補の数は1〜10または15の範囲で変えることができます。

可能であれば、IE6 +およびFF2 +で動作するものを好みます。ありがとう！

csshtmldropshadow
47
Mike

これは私のすべてのブラウザで動作します：

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

次に、すべてのdivにシャドウクラスを与えます。jQueryは必要ありません。

73
Scott H

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

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

css3please で利用可能なジェネレータがあります。

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

これを行うための最も広く互換性のある方法は、自動提案ボックスの下に、ボックス自体と同じサイズの2番目のdivを作成し、数ピクセル右下に移動することです。 JSを使用してJSを作成および配置することができます。かなり現代的なフレームワークを使用している場合、これはそれほど難しくないはずです。

2
Brant Bobby

これを試してみてください。とても簡単に思え、IE6とMozで動作します。

<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]：[border-style] [border-width] [border-color] |受け継ぐ

使用可能な[境界線スタイル]のリストは次のとおりです。

  • 破線
  • 点在
  • ダブル
  • 溝
  • 隠された
  • はめ込み
  • none
  • 最初
  • リッジ
  • 固体
  • 受け継ぐ
2
The Machine