box-shadow
==========

CSS-свойство **`box-shadow`** добавляет тень к элементу. Через запятую можно задать несколько теней. Тень описывается смещениями по оси X и Y относительно элемента, радиусом размытия и распространения, а также цветом.

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

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

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

Синтаксис
---------


```css
/\* Ключевые слова \*/
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` соответствует более длинному списку.

Формальное определение
----------------------

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

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

box-shadow =   
  <spread-shadow># (en-US)    
  
<spread-shadow> =   
  <'box-shadow-color'>? (en-US)                               && (en-US)  
  [ (en-US) <'box-shadow-offset'> [ (en-US) <'box-shadow-blur'> <'box-shadow-spread'>? (en-US) ] (en-US)? (en-US) ] (en-US)  && (en-US)  
  <'box-shadow-position'>? (en-US)                              
  
```

Примеры
-------

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

В этом примере применяется сразу три тени: внутренняя тень, обычная внешняя отбрасываемая тень, а также тень размером 2 пикселя, имитирующая рамку (для создания рамки можно было воспользоваться `outline`).

#### HTML


```html
<blockquote>
  <q>
    Меня уколют ваши речи,<br />
    Об ваши взгляды обожгусь,<br />
    И ранит ложь сильней картечи<br />
    Но все равно я поднимусь.
  </q>
  <p>&mdash; Майя Энджелоу</p>
</blockquote>
```


#### CSS


```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` любое другое значение, углы станут закруглёнными.

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

#### HTML


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


#### CSS


```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 with JavaScript enabled. Enable JavaScript to view data.

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

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