Продолжая тему CSS3 – рассмотрим box-shadow (тень для блока). Достаточно полезное свойство – так как раньше приходилось резать картинки для того что бы создать такой стиль для блока.
Это свойство свободно поддерживается IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1.
Браузер Safari поддерживает альтернативный синтаксис -webkit-box-shadow
Давайте рассмотрим синтаксис:
box-shadow: h-shadow v-shadow blur spread color inset;
Где:
h-shadow – Позиция горизонтальной тени (поддерживаются отрицательные значения)
v-shadow – Позиция вертикальной тени (поддерживаются отрицательные значения)
blur – Размытие тени (Опционально)
spread - Размер тени (Опционально)
color – Цвет тени (Опционально)
inset – При указании данного свойства – тень становится внутрь блока (Опционально)
Для изменения стиля через JavaScript, такой синтаксис:
object.style.boxShadow="15px 15px 5px #сссссс"
Для изменения стиля через Jquery, такой синтаксис:
$(element).css('box-shadow',’15px 15px 5px #сссссс’);