CSS-свойство box-shadow

CSS-свойство box-shadow применяет один или несколько эффектов тени к элементу.

Значение по умолчанию:	`none`
Применяется к:	Все элементы. Это также относится к `::first-letter`
Наследование:	Нет
Анимирование:	Да. Анимируемые свойства
Версия:	Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

box-shadow: [ inset [ offset-x offset-y blur-radius spread-radius color ] ] | none | initial | inherit

Примеры написания кода свойства box-shadow:

.shadow {
    width: 150px;
    height: 150px;
    background: #ccc;
    border: 1px solid #999;
    box-shadow: 2px 2px 4px 2px #999;
}

Вы можете использовать ключ inset, чтобы тень стала внутренней. Врезанные тени рисуются внутри границы, над фоном (background), но под содержимым (content).

.shadow-inside {
    width: 150px;
    height: 150px;
    background: #ccc;
    border: 1px solid #999;
    box-shadow: inset 0 0 6px 2px #999;
}

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

В следующей таблице описаны значения этого свойства.

Значение	Описание
Обязательно должны быть указаны следующие значения
offset-x	Первое значение указывает горизонтальное смещение тени. Положительное значение смещает тень вправо от элемента, в то время как отрицательное значение смещает тень влево
offset-y	Положительное значение смещает тень вниз, тогда как отрицательное значение смещает тень над элементом.
Опционально — следующие значения необязательны
blur-radius	Третье значение — это радиус размытия. Чем больше это значение, тем больше размытие, поэтому тень становится больше и светлее. Значение по умолчанию равно `0`, тень резкая. Отрицательные значения не допускаются.
spread-radius	Четвертая длина — это расстояние распространения тени. Положительные значения приводят к уменьшению формы тени во всех направлениях на указанный радиус. Отрицательные значения приводят к сокращению формы тени.
color	Устанавливает цвет тени. Значение может быть указано в любом поддерживаемом формате значение цвета. Если не указано, применяется текущий `color` элемента.
`inset`	Если присутствует, изменяет тень на внутреннюю. Тени рисуются внутри границы элемента, над фоном, но под содержимым элемента.
`none`	Тень не будет отображаться. Это значение установлено по умолчанию.
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение своего родительского элемента `box-shadow`.