47

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

できれば IE6+ と FF2+ で動作するものが望ましいです。ありがとう！

4

6 に答える 6

74

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

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

次に、任意の div にシャドウ クラスを指定するだけで、jQuery は必要ありません。

于 2011-02-26T16:25:41.440 に答える
12

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

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

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

于 2009-05-13T23:49:54.070 に答える
3 
.shadow {
    -moz-box-shadow:    3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow:         3px 3px 5px 6px #ccc;
}
于 2014-12-25T07:04:20.980 に答える
2

あなたはこれを試してみたいかもしれません。非常に簡単で、少なくとも 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-style] のリストは次のとおりです。

  • 破線
  • 点在
  • ダブル
  • 溝
  • 隠れた
  • はめ込み
  • なし
  • 最初
  • 海嶺
  • 個体
  • 継承する
于 2010-03-11T05:27:32.467 に答える