-moz-box-shadow

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
				3.5+

Краткая информация

Значение по умолчанию	none
Наследуется	Нет
Применяется	Ко всем элементам
Процентная запись	Неприменима

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius (или -moz-border-radius) то тень также получится с закругленными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.

Синтаксис

-moz-box-shadow: none | <тень> [,<тень>]*
где <тень>:
inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

Значения

none: Отменяет добавление тени.
inset: Тень выводится внутри элемента. Необязательный параметр.
сдвиг по x: Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
сдвиг по y: Смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх. Обязательный параметр.
размытие: Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой.
растяжение: Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент.
цвет: Цвет тени в любом доступном CSS формате, по умолчанию тень черная. Необязательный параметр.

Допускается указывать несколько теней, разделяя их параметры между собой запятой. Учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке — в самом низу.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-moz-box-shadow</title>
  <style>
   .shadow {
    -moz-box-shadow: inset 5px 5px 10px #f0f0f0;
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <div class="shadow">Ля-минорной диатонической пентатоники не бывает, 
   а бывает ля-минорная блюзовая гамма. 
   Она отличается от ля-минорной пентатоники одной нотой.</div>
 </body>
</html>

Браузеры

Firefox начиная с версии 4.0 поддерживает стандартное свойство CSS3 box-shadow.

Справочник по CSS