Свойство CSS box-shadow, позволяющее добавить тень к элементу, появилось только в спецификации CSS3. Следовательно, его поддерживают только современные браузеры. Чтобы реализовать поддержку старых версий, необходимо добавлять вендорные префиксы.

Описание свойства

С помощью этого свойства можно управлять цветом тени, ее размерами, смещением. Также можно добавлять несколько теней к элементу, если перечислять их через запятую.
Следует учитывать, что добавление тени делает элемент более широким. Надо следить, чтобы он не выходил за пределы окна браузера. Иначе появится горизонтальная полоса прокрутки.
Возможны следующие значения свойства box-shadow:

1. none. Убирает добавленную тень.
2. inset. Реализует тень внутри блока в CSS.
3. Сдвиг по оси X и Y. Позволяет сместить тень по горизонтали и вертикали относительно объекта соответственно. Оба эти параметра указывать обязательно.
4. Радиус размытия. Если его не указать, тень будет, но четкая. А чем больше это значение, тем она больше, мягче и светлее.
5. Растяжение. Регулирует, будет тень больше элемента или меньше. Для этого нужно установить положительное и отрицательное значение соответственно. Если не указать, величина тени будет совпадать с размерами элемента.
6. Цвет. Если не указан, тень будет черной.

Если указывается несколько теней, первая будет размещаться вверху, а вторая – ниже, последняя – в самой нижней части элемента.
Синтаксис свойства:

box-shadow: none | <тень> [,<тень>]*

где <тень>:

inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

Например, чтобы сделать тень блока с одной стороны по горизонтали, необходимо задать сдвиг по оси x, а чтобы отобразить ее внизу – по оси y.

Совместимость

Чтобы сделать эффект совместимым со старыми версиями браузеров, необходимо добавлять вендорные префиксы или свойство filter (для IE до 9 версии). Кроме указания самого свойства, необходимо добавить его копию с вендорным префиксом или фильтром.
Если нужно реализовать поддержку старых версий Safari и Chrome (в том числе, и для мобильных устройств), надо указать свойство –webkit-box-shadow. А для обеспечения совместимости с браузером Firefox надо добавить префикс -moz.
Например, тень снизу будет выглядеть следующим образом.

.effect1 {
  -webkit-box-shadow: 0 10px 6px -6px #777;
  -moz-box-shadow: 0 10px 6px -6px #777;
  box-shadow: 0 10px 6px -6px #777;
}

Несколько сложнее обеспечить совместимость со старыми версиями Internet Explorer. Для этого необходимо использовать свойство

filter: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000); 

Первый параметр – смещение по горизонтали, второй – смещение по вертикали, а третий – цвет тени. А вот размытие с помощью этого фильтра задать нельзя. Для этого нужно использовать свойство

filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10)

где первый параметр задает угол направления тени (по кругу, до 360 градусов), второй – цвет, а третий – дальность смещения тени.
Разработчик может воспользоваться генератором тени блока css и автоматизировать подбор ее параметров.

Пример тени

Интересный эффект тени – лишь слева и справа от блока, реализуется таким кодом.

.effect2 {
  position: relative;
}
.effect2:before, .effect2:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

Суть проста – тени даются не самому блоку, а его псевдоэлементам, которые прописываются в селекторе. Если воспользоваться лишь одним из псевдоэлементов, можно сделать тень по одну из сторон снизу.