Тень без box-shadow на CSS

Предлагаемое решение не ново, да и тень для блока можно будет сделать только слишком простую, однообразную. CSS3 здесь и не пахнет. Использовать CSS атрибут «box-shadow» использовать гораздо удобнее, но до сих пор этот параметр поддерживается не всеми браузерами. Приходится делать тень без box-shadow, чтобы добиться кроссбраузерности. На самом деле, методов без использований изображений множество. На данной странице Вы увидите пример простого DIV блока, вложенного еще в несколько «дивок». У этих самых блоков имеется border, цвет которых чуть темнее фона.

Тень смотрится вполне естественно, когда её не много, но если добавлять обводку еще и еще, выглядеть это будет не реалистично. Если в качестве фона использовать изображение, обводка потеряет свой смысл. Для фона с изображением нужен другой метод: скорее всего, с использованием слоев.

Код CSS

<style type="text/css"> /*!--Для тени--*/ .shadowbox1 {border:1px solid #142D48;padding:0} .shadowbox2 {border:1px solid #122A43;padding:0} .shadowbox3 {border:1px solid #102439;padding:0} .shadowbox4 {border:1px solid #0E1F32;padding:0} .shadowbox5 {border:1px solid #091623;padding:0} /*!--/Для тени--*/ .content {background:white;width:600px;height:300px;overflow:hidden;} .width_block {width:610px;overflow:hidden;margin-top:10%} </style>

Код HTML

<div class="width_block"> <div class="shadowbox1"> <div class="shadowbox2"> <div class="shadowbox3"> <div class="shadowbox4"> <div class="shadowbox5"> <div class="padding:20px;"> Содержимое </div> </div> </div> </div> </div> </div> </div>

Класс width_block в примере ограничивает область, числовое значение включает в себя размер блока и размер тени.