box-shadow

Властивість CSS box-shadow ("тінь коробки") додає ефекти тіні навколо рамки елемента. Можна вказати кілька ефектів через кому. Тінь описується зсувом за осями X та Y від елемента, радіусами розмиття та розмаху, а також кольором.

Спробуйте його в дії

Властивість box-shadow дає змогу відкидати тінь від рамки майже будь-якого елемента. Якщо на елементі з тінню вказано border-radius, то тінь так само матиме заокруглені кути. Порядок нагромадження кількох тіней такий самий, як для кількох тіней тексту (раніше описана перекриває наступні).

Генератор box-shadow – інтерактивний інструмент, що дає змогу згенерувати box-shadow.

Синтаксис

/* Ключові слова */
box-shadow: none;

/* Колір і два значення довжини */
/* <color> | <length> | <length> */
box-shadow: red 60px -16px;

/* Три значення довжини та колір */
/* <length> | <length> | <length> | <color> */
box-shadow: 10px 5px 5px black;

/* Чотири значення довжини та колір */
/* <length> | <length> | <length> | <length> | <color> */
box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);

/* inset, значення довжини та колір */
/* <inset> | <length> | <length> | <color> */
box-shadow: inset 5em 1em gold;

/* Будь-яка кількість тіней, розділених комами */
box-shadow:
  3px 3px red inset,
  -1em 0 0.4em olive;

/* Глобальні значення */
box-shadow: inherit;
box-shadow: initial;
box-shadow: revert;
box-shadow: revert-layer;
box-shadow: unset;

box-shadow можна вказати за допомогою:

• Двох, трьох або чотирьох значень довжини.

  • Якщо вказані два, то вони вважаються значеннями <offset-x> та <offset-y> (засув за осями X та Y).
  • Якщо вказане третє значення, воно приймається як <blur-radius> (радіус розмиття).
  • Якщо вказане четверте значення, воно приймається у якості <spread-radius> (радіус розмаху).

• Необов'язково – ключове слово inset (вкладена).

• Необов'язково – значення <color>.

Можна додати кілька тіней, вказавши їх через кому.

Значення

• <color> Необов'язкове

  • : Задає колір тіні. Дивіться можливі значення та варіанти запису на сторінці <color>. Якщо не задано, то використовується значення властивості color батьківського елемента.

• <length>

• : Задає відстань відступу тіні. Цей параметр приймає два, три або чотири значення. Третє та четверте значення є необов'язковими. Вони тлумачаться так:

  • Якщо задано два значення, то вони тлумачаться як <offset-x> (горизонтальний відступ) і <offset-y> (вертикальний відступ). Від'ємне значення <offset-x> розміщує тінь зліва від елемента. Від'ємне значення <offset-y> розміщує тінь над елементом. Якщо не задано, то використовується значення 0 для відсутньої довжини. Якщо і <offset-x>, і <offset-y> мають значення 0, то тінь розташовується за елементом (і може породжувати ефект розмитості, якщо задано <blur-radius> чи <spread-radius>).

  • Якщо задано три значення, то третє з них тлумачиться як <blur-radius> (радіус розмиття). Чим воно більше, тим більше розмиття, тож тінь стає більшою та світлішою. Від'ємні значення не допускаються. Якщо не вказане, то вважається рівним 0 (край тіні – різкий). Специфікація не вказує конкретного алгоритму того, як повинен обчислюватись радіус розмиття, втім, пояснює наступне:

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

    • Якщо задано чотири значення, то четверте з них тлумачиться як <spread-radius> (радіус розмаху). Додатні значення змусять тінь розширюватись та збільшуватись, від'ємні – зменшуватись. Якщо не вказано, то вважається рівним 0 (тобто тінь має такий же розмір, як елемент).

• inset Необов'язкове

  • : Змінює тінь з зовнішньої на внутрішню (як ніби вміст був утиснутий в рамку). Внутрішні тіні малюються всередині меж рамки (навіть якщо ця рамка прозора), і відображаються над фоном, але під вмістом. Усталено тінь поводиться як тінь відкидання, надаючи враження, ніби рамка піднята над її вмістом. Це усталена логіка, коли inset не вказано.

Інтерполяція

Під час анімування тіней, наприклад, коли декілька значень тіні прямокутника переходять у нове значення при наведенні миші на елемент, ці значення інтерполюються. Інтерполяція визначає проміжні значення властивостей, як от: радіус розмиття, радіус розмаху і колір, — в процесі переходу тіней. Для кожної тіні в переліку змінюються її колір, координати x та y, розмиття і розмах: колір як <color>, а інші значення — як довжини.

В процесі інтерполяції множинних тіней, між двома списками тіней рамок, розділених комами, тіні паруються послідовно, після чого інтерполяція відбувається між спареними тінями. Якщо списки тіней мають різну довжину — то коротший список підбивається в кінці відповідною кількістю тіней, чий колір — transparent, а X, Y, та розмиття дорівнюють 0, причому параметр inset (чи його відсутність) встановлюються згідно з їхніми відповідниками в іншому списку. Якщо в будь-якій парі тіней одна з них має встановлений inset, а інша — ні, то припиняється інтерполяція всього списку тіней. Тіні змінюватимуть значення на нові без ефекту анімації.

Формальне визначення

Формальний синтаксис

none | <shadow>#
де 
<shadow> = inset? && <length>{2,4} && <color>?
де 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <lab()> | <lch()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
де 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )
<lab()> = lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )
<lch()> = lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )
де 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Приклади

Три тіні

У цьому прикладі три тіні: внутрішня, звичайна відкинута, а також 2-піксельна тінь, що створює ефект межі (замість останньої можна було б використати outline).

HTML

<blockquote>
  <q
    >Можете в мене стріляти словами,<br />
    Штрикать поглядом крізь бійниці вогню,<br />
    І вбивати своєю жорстокістю,<br />
    Але все ж, як життя, я встаю.</q
  >
  <p>&mdash; Майя Енджелоу (переклад – Таня ШерепКо)</p>
</blockquote>

CSS

blockquote {
  padding: 20px;
  box-shadow:
    inset 0 -3em 3em rgb(0 200 0 / 30%),
    0 0 0 2px white,
    0.3em 0.3em 1em rgb(200 0 0 / 60%);
}

Результат

Нуль як значення зсуву та розмиття

Коли значення x-offset, y-offset та blur – нуль, тінь матиме контур суцільного кольору рівного розміру з усіх боків. Тіні відображаються від спідньої до верхньої, тож перша тінь лежить поверх наступних тіней. Коли значення border-radius – 0, як усталено, то кути тіні будуть, власне, кутами. Якщо ж вказана властивість border-radius з будь-яким іншим значенням, то кути будуть закруглені.

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

HTML

<div><p>Привіт, світе</p></div>

CSS

p {
  box-shadow:
    0 0 0 2em #f4aab9,
    0 0 0 4em #66ccff;
  margin: 4em;
  padding: 1em;
}

Результат

Специфікації

Сумісність з браузерами

Дивіться також

• Тип даних <color> (для задання кольору тіні)
• text-shadow
• drop-shadow()
• Застосування кольору до елементів HTML за допомогою CSS