Бросить тень на контейнер div?

У меня есть поисковый запрос с авто-подсказкой, который выдает div под ним с несколькими предложениями строки поиска (например, google). Возможно ли иметь тень в окне автоматического предложения с помощью CSS или мне понадобится script? Я попробовал фоновое изображение, но количество предложений может варьироваться от 1 до 10 или 15.

Я бы предпочел что-то, что работает в IE6 + и FF2 +, если это возможно. Спасибо!

Ответы

Ответ 1

Это работает для меня во всех моих браузерах:

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

то просто укажите любой div теневой класс, не требуется jQuery.

Ответ 2

CSS3 имеет свойство box-shadow. В настоящий момент необходимы префиксы поставщиков для максимальной совместимости с браузером.

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

Существует генератор, доступный в css3please.

Ответ 3

Наиболее распространенным способом сделать это, вероятно, будет создание второго div под вашим полем с автоматическим предложением такого же размера, как и сам ящик, подталкивающий несколько пикселей вниз и вправо. Вы можете использовать JS для его создания и размещения, что не должно быть ужасно трудным, если вы используете довольно современную инфраструктуру.

Ответ 4

вы можете попробовать это. Кажется, это довольно легко и работает на 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] | наследовать

Список доступных [border-style] s:

  • пунктир
  • пунктир
  • двойной
  • канавка
  • скрыт
  • вставка
  • ни один
  • боковик
  • гребень
  • твердое
  • наследует

Ответ 5

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