css властивість box-shadow

Властивість box-shadow додає тінь до елементу.

Властивість `box-shadow`

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

Ти можеш встановити колір тіні, а також задати її зміщення (як далеко вона буде від елементу), не обов’язкові параметри - це колір і додаткові ключові слова. Для пропущених значень зміщення задається 0, а для не заданих кольорів браузер самостійно задасть значення.

Також є можливість задання розмитої тіні (розмиття за Гаусом).

Нотатка:

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: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

Властивість box-shadow може отримувати 9 значень:


none: Без задання. Тіні немає

h-shadow: Обов'язкове значення. Зсув тіні по горизонталі. Позитивне значення цього параметра задає зсув тіні вправо, від'ємне - вліво

v-shadow: Обов'язкове значення. Зсув тіні по вертикалі. Позитивне значення задає зсув тіні вниз, від'ємне - вгору.

blur: Задає радіус розмиття тіні. Чим більше це значення, тим сильніше тінь згладжується, стає ширше і світліше. Якщо цей параметр не заданий, без задання дорівнює 0. Тінь при цьому буде чіткої, а не розмитою.

spread: Позитивне значення розтягує тінь, від'ємне, навпаки, стискає її. Без задання цей параметр не заданий та дорівнює 0, при цьому тінь буде того ж розміру, що й елемент.

color: Колір тіні в будь-якому доступному CSS форматі, без задання тінь чорна.

inset: Тінь виводиться всередині елемента

initial: Встановлює властивість у значення без задання

inherit: Вказує на спадковість властивості від свого батьківського елемента

Значення без задання:	none
Наслідує:	Ні
Анімується:	Так
JavaScript синтаксис:	object.style.boxShadow="10px 20px 30px blue"

Переглядач
box-shadow	10.0 4.0 -webkit-	9.0	4.0 3.5 -moz-	5.1 3.1 -webkit-	10.5

Переглядач
box-shadow	4.0	4.0	5.1

Мобільних переглядачів ще не додано.

Приклади

Динамічний приклад

See the Pen <a href='https://codepen.io/MichaelBondar/pen/PEmwdO/'>PEmwdO</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

Приклад використання властивості

See the Pen <a href='https://codepen.io/MichaelBondar/pen/dJWPjp/'>dJWPjp</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

Приклад використання властивості

See the Pen <a href='https://codepen.io/NagarD/pen/xLbvmK/'>box-shadow</a> by Володимир (<a href='https://codepen.io/NagarD'>@NagarD</a>) on <a href='https://codepen.io'>CodePen</a>.

Синтаксис властивості

.box {


	-moz-box-shadow:    inset 0 0 25px #000000;


	-webkit-box-shadow: inset 0 0 25px #000000;


	box-shadow:         inset 0 0 25px #000000;


}