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

Box-shadow generator

Interactive tool allowing to generate box-shadow.

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

Синтаксис

Formal syntax: none | [inset? && [ <сдвиг по x> <сдвиг по y> <размытие>? <растяжение>? <цвет>? ] ]#

Значения

inset
Если ключевое слово insetне указано (по умолчанию), тень будет снаружи элемента и создаст эффект выпуклости блока.
При наличие ключевого слова inset, тень будет падать внутри блока и создаст эффект вдавленности блока.
<смещение по x> <смещение по y>
Есть 2 значения <length> , которые устанавливают смещение тени. <offset-x> определяет горизонтальное расстояние. Отрицательные значения располагают тень слева от элемента. <offset-y> определяет вертикальное расстояние. Отрицательные значения располагают тень выше элемента. Смотри <length> для доступных вариантов.
Если оба значения равны 0, то тень располагает за элементом (и могут отображать размытие если <blur-radius> и/или <spread-radius>, если установлены).
<blur-radius>
Это третье <length> значение. Чем больше это значение, тем больше и светлее размытие. Отрицательные значения не поддерживаются. Если не определено, будет назначен 0 (резкий край тени).
<spread-radius>
This is a fourth <length> value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).
<color>
See <color> values for possible keywords and notations.
If not specified, the color used depends on the browser - it is usually the value of the color property, but note that Safari currently paints a transparent shadow in this case.

Live examples

box-shadow: 60px -16px teal;
box-shadow: 10px 5px 5px black;
box-shadow: 3px 3px red, -1em 0 0.4em olive;
box-shadow: inset 5em 1em gold;
box-shadow: 0 0 1em gold;
box-shadow: inset 0 0 1em gold;
box-shadow: inset 0 0 1em gold, 0 0 1em red;

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
Определение 'box-shadow' в этой спецификации.
Кандидат в рекомендации  

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

Browser compatibility

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Базовая поддержкаChrome Полная поддержка 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 ? Edge Mobile Полная поддержка ДаFirefox Android ? 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 ? Edge Mobile Полная поддержка ДаFirefox Android ? 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 ? Edge Mobile Полная поддержка ДаFirefox Android ? 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 ? Edge Mobile Полная поддержка ДаFirefox Android ? Opera Android Полная поддержка ДаSafari iOS Полная поддержка 5
Полная поддержка 5
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android ?

Легенда

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

 

Также смотрите

 

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

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