Тень блока (box-shadow)

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

 

Box-shadow generator

Interactive tool allowing to generate box-shadow.

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

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

Синтаксис

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

Значения

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

При наличие ключевого слова inset, тень будет падать внутри блока и создаст эффект вдавленности.
<смещение по x> <смещение по y>
These are two <length> values to set the shadow offset. <offset-x> specifies the horizontal distance. Negative values place the shadow to the left of the element. <offset-y> specifies the vertical distance. Negative values place the shadow above the element. See <length> for possible units.
If both values are 0, the shadow is placed behind the element (and may generate a blur effect if <blur-radius> and/or <spread-radius> is set).
<blur-radius>
This is a third <length> value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be 0 (the shadow's edge is sharp).
<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' в этой спецификации.
Кандидат в рекомендации  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 10.0
1.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 (See note) 10.5 5.1 (WebKit 534)
3.0 (WebKit 522)-webkit
Multiple shadows 10.0
1.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 10.5 5.1 (WebKit 534)
3.0 (WebKit 522)-webkit
inset keyword 10.0
4.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 10.5 5.1 (WebKit 534)
5.0 (WebKit 533)-webkit
Spread radius 10.0
4.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 10.5 5.1 (WebKit 534)
5.0 (WebKit 533)-webkit
Feature iOS Safari Opera Mini Opera Mobile Android Browser
Basic support

5.0
(Да)-webkit

? Yes Yes (2.2 tested) -webkit
Multiple shadows 5.0
(Да)-webkit
? ? ?
inset keyword 5.0
(Да)-webkit
? ? ?
Spread radius 5.0
(Да)-webkit
? ? ?

Notes

  • 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).
  • Shadows affect layout in older Gecko, Presto, and WebKit; e.g. if you cast an outer shadow to a box with a width of 100%, you'll see a scrollbar.
  • Gecko 13 (Firefox 13) removed support for -moz-box-shadow. Since then, only the unprefixed version is supported.
  • In order to get box-shadow in IE9 or later, you need to set border-collapse to separate.

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

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