CSS3 - box-shadow

Итак, во-первых, свойство надо записывать не только как box-shadow, но и дублировать в виде -moz-box-shadow и -webkit-box-shadow. Это всё для того, чтобы тень работала в большинстве браузеров.

Во-вторых, box-shadow принимает минимум два значения: первое (1px) - смещение по горизонтали, второе (2px) - смещение по вертикали. Эти два параметра обязательны, но есть и необязательные параметры, которые можно не указывать.

Итак,

• первый необязательный параметр, inset, позволяет направить тень вовнутрь блока, а не наружу.
• второй и третий параметры обязательны и о них было написано выше (смещение по горизонтали и вертикали)
• четвёртый параметр - размытие тени (действие аналогичное, как и в text-shadow)
• пятый параметр - радиус тени. Тут поподробнее, т.к. в text-shadow этого не было. При указании радиуса, величина тени увеличится по отношению к размеру блока на указанное число пикселей. Соответственно, если число не указано, то тень будет соответствовать размеру блока
• шестой параметр - цвет тени. При отсутствии агрумента цвета, берётся цвет текста.
  Теперь, чтобы лучше понять работу свойства, просто рассмотрим несколько примеров с краткими пояснениями.

Примеры

1. Простое смещение тени вправо и вниз

2. Добавляем размытие и цвет тени

3. Пробуем отрицательные значения тени

4. Увеличиваем размер тени

5. Направляем текст вовнутрь

6. Направляем текст вовнутрь и при этом не смещаем тень
Обратите внимание на следующее. Если мы указываем смещение по нулям, размытие не задаём, то направленная вовнутрь тень не покажется вовсе.

Но стоит увеличить размер тени и при желании размыть, всё будет как надо.

7. Обводка контейнера
В связи с 6 пунктом понятно, что убрав inset, мы получаем обводку контейнера. Напоминаю, что для этого в text-shadow приходилось 4 тени указывать.

8. Несколько теней
А в связи с 7 пунктом говорю, что да, можно несколько теней задавать.

Кроссбраузерность

Как и для text-shadow, на jQuery есть плагин, который позволяет и старым версиям браузеров понимать это свойство (ссылка на плагин). Но функционал свойства ограничен смещением, размытием и цветом, т.е. таким же набором, как и для text-shadow. Применяется плагин просто:

Сам плагин работает очень просто. Он находит нужный нам контейнер, увеличивает его размер, задаёт цвет и засовывает его под основной блок. Размытие задаётся через специальный фильтр.