Тень на контейнере div? - PullRequest
Новая
       20

Тень на контейнере div?

47 голосов
/ 14 мая 2009

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

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

Ответы [ 6 ]

73 голосов
/ 26 февраля 2011

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

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

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

12 голосов
/ 14 мая 2009

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

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

Генератор доступен на css3please .

3 голосов
/ 25 декабря 2014 
.shadow {
    -moz-box-shadow:    3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow:         3px 3px 5px 6px #ccc;
}
2 голосов
/ 11 марта 2010

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

  • пунктир
  • пунктир
  • двойной
  • паз
  • скрыт
  • вставка
  • нет
  • боковик
  • Хребет
  • твердый
  • 1029 * унаследуют *
2 голосов
/ 14 мая 2009

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

0 голосов
/ 14 мая 2009

Вы можете попробовать использовать тени PNG. IE6 не поддерживает его, однако он будет хорошо работать.

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

...