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

Приклади


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

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

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

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

.box {
	-moz-box-shadow:    inset 0 0 25px #000000;
	-webkit-box-shadow: inset 0 0 25px #000000;
	box-shadow:         inset 0 0 25px #000000;
}

Додаткові посилання

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів