box-shadow

Интерактивный пример

box-shadow: 10px 5px 5px red;

box-shadow: 60px -16px teal;

box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, 0.2);

box-shadow: inset 5em 1em gold;

box-shadow:
  3px 3px red,
  -1em 0 0.4em olive;

<section id="default-example">
  <div class="transition-all" id="example-element">
    <p>This is a box with a box-shadow around it.</p>
  </div>
</section>

#example-element {
  margin: 20px auto;
  padding: 0;
  border: 2px solid #333;
  width: 80%;
  text-align: center;
}

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

Генератор теней — интерактивный инструмент, позволяющий сгенерировать значение для 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;

Каждая тень определяется следующим образом:

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

  • Если указаны только два значения, они будут означать смещение по X (<offset-x>) и смещение по Y (<offset-y>).
  • Третье значение устанавливает радиус размытия (<blur-radius>).
  • Четвёртое значение задаёт радиус распространения (<spread-radius>).

• Необязательное ключевое слово inset.

• Необязательное значение цвета (<color>).

Для одновременного создания нескольких теней используйте список значений, разделённых запятыми.

Значения

inset

Если не указано (по умолчанию), то тень будет отбрасываться от элемента (придавая эффект выпуклости блоку). Наличие ключевого слова inset отбрасывает тень внутри элемента (создавая эффект вдавленности блока). Внутренние тени начинаются с рамок элемента (даже если они прозрачные), над фоном элемента, но не под его содержимым.

<offset-x> <offset-y>

Есть два значения <length>, отвечающие за смещения тени. Значение <offset-x> задаёт положение тени по горизонтали. Отрицательные значения размещают тень слева от элемента. Значение <offset-y> определяет положение тени по вертикали. Отрицательные значения располагают тень выше элемента. См. <length>, чтобы узнать список допустимых единиц. Если смещение по обоим осям равно 0, то тень будет отбрасываться за элементом (в таком случае при наличии значений <blur-radius> и/или <spread-radius> будет эффект размытия).

<blur-radius>

Это третье значение <length>. Чем больше это значение, тем шире и светлее будет тень. Отрицательные значения не допускаются. Если не указано (по умолчанию), используется 0 (край тени будет резким). Спецификация не определяет в точности алгоритм вычисления радиуса размытия, однако описывает его так:

…для длинного прямого края тени должен быть создан цветовой переход, равный длине расстояния размытия, который перпендикулярен и центрирован по краю тени. Переход начинается от указанного цвета тени в конечной точке радиуса внутри тени до полностью прозрачного цвета в конечной точке пределов радиуса.

<spread-radius>

Это четвёртое значение <length>. Положительные значения расширяют тень, отрицательные — сжимают её. Если не указано (по умолчанию)) используется 0 (тень будет такого же размера, что и сам элемент).

<color>

Смотрите страницу по <color> для получения допустимых значений. Если не указано (по умолчанию), используется currentColor.

Интерполяция

Каждая тень в списке (none считается за пустой список) интерполируется через значения цвета x, y, радиуса размытия и (когда это допустимо) и радиуса расширения. Для каждой тени, если обе входные тени отмечены как inset или ни одна из них таковой не является, то интерполированная тень будет соответствовать входным теням. Если в любой паре входных теней одна из них является внутренней ( inset), а другая нет, то список теней не интерполируется. Если количество теней отличается в разных списках, то более короткий список дополняется в конце тенями, цвет которых прозрачен (transparent), все значения длин равны 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 ]#  

Примеры

Добавление трёх теней

В этом примере применяется сразу три тени: внутренняя тень, обычная внешняя отбрасываемая тень, а также тень размером 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 (x-offset), смещение по Y (y-offset) и радиус размытия (blur) равны нулю, тень будет представлять собой цветной контур одинакового размера на всех сторонах блока. Тени отображаются с конца списка, поэтому первая тень накладывается поверх последующих. Когда в border-radius указано значение по умолчанию 0, углы тени становятся прямыми углами. Соответственно, если указать в border-radius любое другое значение, углы станут закруглёнными.

Чтобы тень не перекрывала соседние элементы и не выходила за границу содержащего блока, был добавлен внешний отступ размером, равный самому большому радиусу размытия в списке теней. Тень не влияет на размеры блочной модели.

HTML

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

CSS

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

Результат

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

Совместимость с браузерами

Смотрите также

• Тип данных <color>
• Другие свойства, относящиеся к цвету: color, background-color, border-color, outline-color, text-decoration-color, text-emphasis-color, caret-color и column-rule-color
• text-shadow
• Применение цвета к HTML-элементам с помощью CSS