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 - зміщення тіні в пікселях.