box-shadow

Оновлено: 21.12.2022

box-shadow

Додає тінь до елемента. Допускається використовувати кілька тіней, вказуючи їхні параметри через кому, під час накладення тіней перша тінь у списку буде вищою, остання нижчою. Якщо для елемента задається радіус заокруглення через властивість

border-radius, то тінь також вийде із закругленими куточками. Додавання тіні збільшує ширину елемента, тому можлива поява горизонтальної смуги прокрутки в браузері.

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

Значення за замовчуванням none
Успадковується Ні
Застосовується До всіх елементів
Анімується Так

Синтаксис

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

де <тінь>:

inset <зсув по x> <зсув по y> <розмиття> <розтягнення> <колір>

Значення

none Скасовує додавання тіні.
inset Тінь виводиться всередині елемента.
<зсув по x> Зсув тіні по горизонталі щодо елемента. Позитивне значення цього параметра задає зсув тіні праворуч, негативне - ліворуч.
<зсув по y> Зсув тіні по вертикалі відносно елемента. Позитивне значення задає зсув тіні вниз, негативне - вгору.
<розмиття> Задає радіус розмиття тіні. Що більше це значення, то сильніше тінь згладжується, стає ширшою і світлішою. Якщо цей параметр не задано, за замовчуванням встановлюється рівним 0, тінь при цьому буде чіткою, а не розмитою.
<розтягнення> Позитивне значення розтягує тінь, негативне, навпаки, її стискає. Якщо цей параметр не задано, за замовчуванням встановлюється 0, при цьому тінь буде того ж розміру, що й елемент.
<колір> Колір тіні в будь-якому доступному CSS форматі, за замовчуванням тінь чорна.

Допускається вказувати кілька тіней, розділяючи їхні параметри між собою комою. Враховується такий порядок: перша тінь у списку розміщується вгорі, остання в списку - внизу.

Приклад

Об'єктна модель

Об'єкт.style.boxShadow

Примітка

Safari до версії 5.1, Chrome до версії 10.0, Android до версії 4.0 підтримують властивість -webkit-box-shadow.

Firefox до версії 4.0 підтримує властивість -moz-box-shadow.

Internet Explorer до версії 9.0 не підтримує властивість box-shadow, натомість можна використовувати властивість filter:filter: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);
Тут: offX - зміщення тіні по горизонталі; offY - зміщення тіні по вертикалі; color - колір тіні.

Застосування фільтра dropshadow дає чітку різку тінь, тому для ефекту розмиття можна використовувати фільтр shadow.filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10);
Тут: direction - кут напрямку тіні від 0 до 360°; color - колір тіні; strength - зміщення тіні в пікселях.

Браузери

box-shadow

Переглянути сумісність з Can I use?

box-shadow