box-shadow

Свойство box-shadow позволяет создавать тень от рамки почти любого элемента. Если для элемента задан border-radius, тень принимает те же закругленные углы. Порядок перекрытия нескольких теней box-shadow такой же, как и у нескольких теней text-shadow (первая заданная тень расположена поверх остальных).

Генератор box-shadow — интерактивный инструмент, позволяющий генерировать box-shadow.

/* Keyword values */
box-shadow: none;

/* A color and two length values */
/* <color> | <length> | <length> */
box-shadow: red 60px -16px;

/* Three length values and a color */
/* <length> | <length> | <length> | <color> */
box-shadow: 10px 5px 5px black;

/* Four length values and a color */
/* <length> | <length> | <length> | <length> | <color> */
box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);

/* inset, length values, and a color */
/* <inset> | <length> | <length> | <color> */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow:
  3px 3px red inset,
  -1em 0 0.4em olive;

/* Global values */
box-shadow: inherit;
box-shadow: initial;
box-shadow: revert;
box-shadow: revert-layer;
box-shadow: unset;

Для указания одной тени используйте:

• Два, три или четыре значения <length>.

  • Если заданы только два значения, они интерпретируются как значения <offset-x> и <offset-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 Необязательно

Изменяет тень из внешней box-shadow во внутреннюю box-shadow (как если бы содержимое было вдавлено в рамку). Внутренние тени нарисованы внутри границы рамки (даже если граница прозрачная), и они появляются над фоном, но под содержимым. По умолчанию тень ведёт себя как тень от выступов, создавая видимость того, что рамка возвышается над её содержимым. Это поведение по умолчанию, когда inset не задано.

При анимации теней, например, когда несколько значений тени на рамке переходят в новые значения при наведении, значения интерполируются. Интерполяция определяет промежуточные значения свойств, таких как радиус размытия, радиус разброса и цвет, при переходе теней. Для каждой тени в списке теней цвет, x, y, размытие и разброс интерполируются; цвет как <color>, а другие значения как <length>.

При интерполяции нескольких теней между двумя списками теней, разделёнными запятыми, тени сопоставляются по порядку, и интерполяция происходит между сопоставленными тенями. Если списки теней имеют разную длину, то более короткий список дополняется в конце тенями, цвет которых transparent, а X, Y и размытие 0, при этом вставка или отсутствие вставки устанавливаются в соответствие. Если в любой паре теней одна имеет inset установленное, а другая нет, весь список теней не интерполируется; тени изменятся на новые значения без анимации.

box-shadow = 
  <spread-shadow>#  

<spread-shadow> = 
  <'box-shadow-color'>?                               &&
  [ <'box-shadow-offset'> [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ]  &&
  <'box-shadow-position'>?                            

<box-shadow-color> = 
  <color>#  

<box-shadow-offset> = 
  [ none | <length>{2} ]#  

<box-shadow-blur> = 
  <length [0,∞]>#  

<box-shadow-spread> = 
  <length>#  

<box-shadow-position> = 
  [ outset | inset ]#  

В этом примере мы используем три тени: вставленную тень, обычную тень выступов и тень 2px, которая создаёт эффект границы (вместо неё можно было использовать outline для этой третьей тени).

HTML

<blockquote>
  <q>
    You may shoot me with your words,<br />
    You may cut me with your eyes,<br />
    You may kill me with your hatefulness,<br />
    But still, like air, I'll rise.
  </q>
  <p>&mdash; Maya Angelou</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 равны нулю, тень box-shadow будет сплошным цветным контуром одинакового размера со всех сторон. Тени рисуются спереди назад, поэтому первая тень находится поверх последующих теней. Когда border-radius установлено в 0, как по умолчанию, углы тени будут, ну, углами. Если бы мы установили border-radius в какое-либо другое значение, углы были бы закругленными.

Мы добавили отступ размером с самую широкую тень box-shadow, чтобы убедиться, что тень не перекрывает соседние элементы или не выходит за пределы рамки содержащего элемента. Тень box-shadow не влияет на размеры модели бокса.

HTML

<div><p>Hello World</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