Применение теней к элементам div

Question

Мне нужна небольшая помощь в применении изображения с тенями для ряда элементов DIV.У рассматриваемых элементов уже есть фоновое изображение, поэтому я оборачиваю вокруг них еще один DIV.Ситуация усложняется еще и потому, что я также использую фреймворк 960gs CSS.

Это мой текущий HTML-код для отображения типа содержимого:

<div class="grid_12 boxout-shadow-920">
 <div class="boxout">
  <p>The personal site and blog of CJD. The site is still a work-in-progress but please do have a look around and let me know what you think! </p>
 </div>
</div>

Boxout CSS:

.boxout {
 background:url("../images/overlay.png") repeat-x scroll 0 0 #EEEEEE; 
 -moz-border-radius:4px 4px 4px 4px;
 border:1px solid #DDDDDD;
 margin-bottom:15px;
 padding:5px;
}

boxout-shadow-920 CSS:

.boxout-shadow-920 {
 background:url("../images/box-shadow-920.png") no-repeat scroll 50% 101% transparent;
}

Теперь это работает в определенной степени.Изображение boxshadow показывает внизу поля содержимого, что я и хотел бы.Однако, поскольку я использую фиксированный процент в 101%, если высота поля содержимого слишком мала, не будет отображаться большая часть изображения тени, а если поле содержимого слишком велико, между блоком итеневое изображение.

Так или иначе, я ищу кросс-браузерное решение на основе CSS для правильной работы.

Я уверен, что на это есть простой ответ - любая помощь приветствуется!

Answer 1

Та же техника, что и закругленные углы .

Answer 2

С новой спецификацией CSS3 мы получили свойство box-shadow, которое уже поддерживается браузерами Mozilla (через -moz-box-shadow) и браузерами Webkit (через -webkit-box-shadow).С версии 10.5 pre-alpha также Opera поддерживает это свойство.

Так что, если вы не согласны отображать тень для Internet Explorer, вы можете придерживаться этого свойства.Идея, лежащая в его основе, гораздо понятнее, поскольку не требуется разметка HTML для конкретного макета.

Подробнее о совместимости браузера см. Здесь: http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows

Для максимальной поддержки большинства браузерных движковВы должны использовать следующие три утверждения:

box-shadow: 3px 3px 5px #000;
-moz-box-shadow: 3px 3px 5px #000;
-webkit-box-shadow: 3px 3px 5px #000;

Answer 3

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

Answer 4

Посетите этот сайт, чтобы узнать о различных CSS3-эффектах, включая тени от блоков (то, что вы ищете): http://css3please.com/