box-shadow
CSS-свойство box-shadow
добавляет тень к элементу. Через запятую можно задать несколько теней. Тень описывается смещениями по оси X и Y относительно элемента, радиусом размытия и распространения, а также цветом.
Интерактивный пример
Свойство 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>
).
- Если указаны только два значения, они будут означать смещение по X (
-
Необязательное ключевое слово
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
соответствует более длинному списку.
Формальное определение
Начальное значение | none |
---|---|
Применяется к | все элементы. Это также применяется к ::first-letter . |
Наследуется | нет |
Обработка значения | любая абсолютная длина; работает любой указанный цвет; если другое не указано |
Animation type | список теней |
Формальный синтаксис
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>— Майя Энджелоу</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;
}
Результат
Спецификации
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # box-shadow |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Тип данных
<color>
- Другие свойства, относящиеся к цвету:
color
,background-color
,border-color
,outline-color
,text-decoration-color
,text-emphasis-color
,caret-color
иcolumn-rule-color
text-shadow
- Применение цвета к HTML-элементам с помощью CSS