Тень на CSS. Селектор box-shadow


Мы продолжаем изучать CSS3, и новое свойство box-shadow позволяет не используя изображения добавлять эффект тени для выбранных элементов.

Благодаря различным значениям свойства box-shadow, мы можем указать, что тень располагается слева или справа, сверху или снизу, на внешней поверхности элемента или внутренней, можем управлять градиентом тени и изменять ее цвет.

Box-shadow не является частью так называемой «блочной-модели», что означает, что тень не включается в высоту/ширину при подсчете размера элемента.

Это свойство CSS3 можно комбинировать с другими свойствами, такими как CSS3 border-radius.

Браузеры, которые на данный момент поддерживают это свойство: Firefox 3.5+ (c добавлением префикса -moz); Opera 10.50+; Chrome 1.0+ и Safari 3.0+ (c добавлением префикса -webkit);

Значения свойства box-shadow

1. Горизонтальное положение тени.
Это значение может быть положительным для сдвига тени вправо или отрицательным для сдвига влево.

box-shadow: 10px 10px 20px #000000;
box-shadow: -10px 10px 20px #000000;

2. Вертикальное положение тени.
Это значение может быть положительным для сдвига тени вверх или отрицательным для сдвига вниз.

box-shadow:10px 10px 20px #000000;
box-shadow:10px -10px 20px #000000;

3. Радиус размытия — степень размытия тени.
Это значение может быть только положительным. Минимальным его значением является ноль. Чем больше значение, тем больше будет размыта тень.
Это значение может быть опущено, тогда оно будет равно минимальному значению 0. Не будет размытости и тень будет выглядеть блоком с аккуратными ровными краями.

box-shadow:10px 10px 20px #000000;

А значение

box-shadow:10px 10px 0 #000000;

, будет аналогично записи:

box-shadow:10px 10px #000000;

4. Цвет тени.

box-shadow:10px 10px 20px #000000;
box-shadow:10px 10px 20px black;
box-shadow:10px 10px 20px rgb(0,0,0);

Важно помнить, что 2 других значения ‘spread radius’(добавляет тень во всех направлениях от элемента) и ‘inset’(добавляет внутреннюю тень), поддерживаются пока не всеми браузерами. И их использование, на момент написания статьи, не рекомендовано.