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.

Поддержка браузеров

Свойство box-shadow поддерживается во всех основных браузерах.

Читайте также

Похожие посты

CSS-свойство clip

Определяет координаты области, которая будет кадрирована, т.е. содержимое за пределом этой области будет отрезано

CSS-свойство bottom

Задает смещение или отступ от нижнего края элемента

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.