css властивість 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 - колір тіні.

автор: NagarD правити

Нотатка

Застосування фільтру dropshadow дає чітку різку тінь, тому для ефекту розмиття можна використовувати фільтр shadow.

filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10);

Тут: direction - кут напрямку тіні від 0 до 360°; color - колір тіні; strength - зміщення тіні в пікселях.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

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

none

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

автор: NagarD

правити

h-shadow

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

автор: NagarD

правити

v-shadow

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

автор: NagarD

правити

blur

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

автор: NagarD

правити

spread

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

автор: NagarD

правити

color

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

автор: NagarD

правити

inset

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

автор: NagarD

правити

initial

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

автор: NagarD

правити

inherit

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

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box in">inset — тінь усередині</div>
<div class="box out">без inset — назовні</div>

.box {
    display: inline-block;
    width: 170px;
    padding: 30px 16px;
    margin: 16px;
    background: #fff;
}

.in  { box-shadow: inset 0 0 25px #000000; }
.out { box-shadow: 0 0 25px #000000; }