box-shadow

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

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

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

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

Синтаксис

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

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

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

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

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

• Двох, трьох або чотирьох значень <length>.

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

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

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

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

Значення

inset (вкладена)

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

<offset-x> (зсув по осі X)

Значення <length>, що задає зсув по горизонталі. Від'ємні значення поміщають тінь з лівого боку від елемента.

<offset-y> (зсув по осі Y)

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

<blur-radius> (радіус розмиття)

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

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

<spread-radius> (радіус розмаху)

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

<color> (колір)

Дивіться значення <color> для інформації про можливі ключові слова та формати значень. Якщо не вказане – вважається рівним до currentcolor.

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

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

В процесі інтерполяції множинних тіней, між двома списками тіней рамок, розділених комами, тіні паруються послідовно, після чого інтерполяція відбувається між спареними тінями. Якщо списки тіней мають різну довжину — то коротший список підбивається в кінці відповідною кількістю тіней, чий колір — 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 rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255),
    0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}

Результат

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

Коли значення 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;
}

Результат

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

              <br />
              <small>
                  # box-shadow
                </small>
            </a>
          </td>
        </tr>
      </tbody>
    </table>