Каков наилучший семантический и правильный метод создания тени вокруг всего #wrapper? со всех сторон

Question

Каков наилучший семантический и правильный метод для создания тени вокруг всего #wrapper? со всех сторон. по горизонтали может быть зафиксировано, но по вертикали должно быть расширяемым.

Answer 1

Если вы хотите использовать другой, не семантический метод для IE, , вы можете просто использовать CSS 3 для текущих браузеров (на основе Webkit и Gecko) :

box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;

_{(источник: css3.info )}

Конечно, для IE у вас есть несколько других вариантов.

• Используйте одно изображение для фона с тенью.

• Используйте некоторую хитрость CSS, чтобы создать несколько div-оболочек с небольшими границами, составляющими тень .

  

• Используйте JavaScript для создания тени .

Последнее имеет то преимущество, что дает вам шанс использовать CSS box-shadow в браузерах с поддержкой CSS3 и тень Javascript для остальных (IE / Opera).

Answer 2

Если бы ширина была фиксированной, я бы не использовал обертку, я бы сделал так:

<div class="box-header">
</div>
<div class="middle">
my content
</div>
<div class="box-footer">
</div>

Для классов top и bottom я бы поместил верхнюю и нижнюю тени как фоновое изображение css.

Тогда я бы repeat-y фоновое изображение, представляющее тени по обе стороны от поля.

Если вам не нужна совместимость с различными браузерами, предпочтите использование свойств CSS3.

Answer 3

• Некоторые трюки с JavaScript
• CSS3 или пользовательские стили браузера
• Используйте изображения вокруг # wrapper

Тени вряд ли можно сделать семантически правильными, поскольку они не имеют значения Это просто элемент оформления (презентации).