Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

CSS-свойство box-shadow позволяет добавлять элементу одну или несколько теней, указывая их параметры через запятую. Свойство тени представляет собой описанные смещения по x и y от элемента, радиус размытия и его радиус, а также цвет.

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

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

Синтаксис

/* 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;

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

/* Глобальные ключевые слова */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

Чтобы задать одну тень, можно использовать:

  • Два, три и четыре значения <length>.
    • Если задано только два значения, они интерпретируется как <offset-x><offset-y> values.
    • Если задано третье значение, оно понимается как <blur-radius>.
    • Если задано чертвёртое значение, оно интерпретируется <spread-radius>.
  • Дополнительно, можно задать ключевое слово inset.
  • Дополнительно, можно задать значение <color>.

Чтобы задать несколько теней, перечислите их через запятую.

Значения

inset
Если ключевое слово inset не указано (по умолчанию), тень будет снаружи элемента (и создаст эффект выпуклости блока).
При наличие ключевого слова inset, тень будет падать внутри блока и создаст эффект вдавленности блока. Inset-тени рисуются в пределах границ элемента (даже прозрачные), поверх фона и за контентом.
<offset-x> <offset-y>
Существуют 2 значения <length>, которые устанавливают смещение тени. <offset-x> определяет горизонтальное расстояние. Отрицательные значения располагают тень слева от элемента. <offset-y> определяет вертикальное расстояние. Отрицательные значения располагают тень выше элемента. Посмотрите какие единицы <length> можно задать.
Если оба значения равны 0, то тень расположится за элементом (и будет отображаться размытие, если <blur-radius> и/или <spread-radius> установлены).
<blur-radius>
Это третье значение <length>. Чем больше это значение, тем больше и светлее размытие. Отрицательные значения не поддерживаются. Если не определено, будет использоваться 0 (резкий край тени). Спецификация не содержит в себе точного алгоритма расчёта размытости теней, однако, в ней указано следущее:
…for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow’s edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it.
<spread-radius>
Это четвёртое значение <length>. Положительные значения увеличивают тень, отрицательные - сжимают. По умолчанию значение равно 0 (размер тени равен размеру элемента).
<color>
Смотрите возможные ключевые слова и нотации для <color>.
Если не указано, используемый цвет будет зависеть от браузера - обычно будет применено значение свойства color, но Safari в настоящее время рисует прозрачную тень в этом случае.

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

Each shadow in the list (treating none as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components. For each shadow, if both input shadows are or are not inset, then the interpolated shadow must match the input shadows in that regard. If any pair of input shadows has one inset and the other not inset, the entire shadow list is uninterpolable. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is transparent, all lengths are 0, and whose inset (or not) matches the longer list.

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

none | <shadow>#

где
<shadow> = inset? && <length>{2,4} && <color>?

где
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <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>? )

где
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Примеры

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

Спецификация Статус Комментарий
CSS Backgrounds and Borders Module Level 3
Определение 'box-shadow' в этой спецификации.
Кандидат в рекомендации Изначальное определение

Начальное значениеnone
Применяется квсе элементы. Это также применяется к ::first-letter.
Наследуетсянет
Отображениевизуальный
Обработка значениялюбая абсолютная длина; работает любой указанный цвет; если другое не указано
Animation typeсписок теней
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
box-shadowChrome Полная поддержка 10
Замечания
Полная поддержка 10
Замечания
Замечания Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Полная поддержка 1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12Firefox Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Нет поддержки 3.5 — 13
С префиксом
С префиксом Требует вендорный префикс: -moz-
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Полная поддержка 9
Замечания
Полная поддержка 9
Замечания
Замечания To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.
Замечания Since version 5.5, Internet Explorer supports Microsoft's DropShadow and Shadow Filter. You can use this proprietary extension to cast a drop shadow (though the syntax and the effect are different from CSS3)
Opera Полная поддержка 10.5
Замечания
Полная поддержка 10.5
Замечания
Замечания Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Safari Полная поддержка 5.1
Замечания
Полная поддержка 5.1
Замечания
Замечания Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Полная поддержка 3
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка Да
С префиксом Замечания
Полная поддержка Да
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Chrome Android Полная поддержка 18
Замечания
Полная поддержка 18
Замечания
Замечания Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Полная поддержка 18
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Нет поддержки 4 — 14
С префиксом
С префиксом Требует вендорный префикс: -moz-
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Safari iOS Полная поддержка 5
Замечания
Полная поддержка 5
Замечания
Замечания Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android ?
Multiple shadowsChrome Полная поддержка 10
Полная поддержка 10
Полная поддержка 1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12Firefox Полная поддержка 4
Полная поддержка 4
Нет поддержки 3.5 — 13
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Полная поддержка 9
Замечания
Полная поддержка 9
Замечания
Замечания To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.
Opera Полная поддержка 10.5Safari Полная поддержка 5.1
Полная поддержка 5.1
Полная поддержка 3
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка Да
С префиксом
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 18
Полная поддержка 18
Полная поддержка 18
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4
Полная поддержка 4
Нет поддержки 4 — 14
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка ДаSafari iOS Полная поддержка 5
Полная поддержка 5
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android ?
insetChrome Полная поддержка 10
Полная поддержка 10
Полная поддержка 1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12Firefox Полная поддержка 4
Полная поддержка 4
Нет поддержки 3.5 — 13
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Частичная поддержка 9
Замечания
Частичная поддержка 9
Замечания
Замечания To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.
Замечания inset must be the last keyword in the declaration.
Opera Полная поддержка 10.5Safari Полная поддержка 5.1
Полная поддержка 5.1
Полная поддержка 5
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка Да
С префиксом
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 18
Полная поддержка 18
Полная поддержка 18
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4
Полная поддержка 4
Нет поддержки 4 — 14
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка ДаSafari iOS Полная поддержка 5
Полная поддержка 5
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android ?
Spread radiusChrome Полная поддержка 10
Полная поддержка 10
Полная поддержка 1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12Firefox Полная поддержка 4
Полная поддержка 4
Нет поддержки 3.5 — 13
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Полная поддержка 9
Замечания
Полная поддержка 9
Замечания
Замечания To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.
Opera Полная поддержка 10.5Safari Полная поддержка 5.1
Полная поддержка 5.1
Полная поддержка 5
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка Да
С префиксом
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 18
Полная поддержка 18
Полная поддержка 18
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4
Полная поддержка 4
Нет поддержки 4 — 14
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка ДаSafari iOS Полная поддержка 5
Полная поддержка 5
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Частичная поддержка  
Частичная поддержка
Совместимость неизвестна  
Совместимость неизвестна
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

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

Метки документа и участники

Внесли вклад в эту страницу: mdnwebdocs-bot, BychekRU, Cheglok, roman-kosov, regress000, Sajag, Sebastianz, amityagov, Sehan
Обновлялась последний раз: mdnwebdocs-bot,