# Свойство box-shadow

Свойство `box-shadow` задает тень блоку. В качестве значения свойство принимает `6` параметров, перечисляемые через пробел, либо ключевое слово `none`, отменяющее тень совсем.

## Синтаксис

`селектор { box-shadow: inset сдвиг_по_x сдвиг_по_y размытие размер_тени цвет; }`
`селектор { box-shadow: none; }`

## Параметры

Параметр | Описание
--- | ---
`inset` | Необязательный параметр. Если он задан, то тень будет внутри контейнера, если не задан - то снаружи.
сдвиг по x | Задает смещение тени по оси X. Положительное значение смещает вправо, отрицательное - влево.
сдвиг по y | Задает смещение тени по оси Y. Положительное значение смещает вниз, отрицательное - вверх.
размытие | Задает размытие тени. Чем больше значение - тем более размытой будет тень. Необязательный параметр. Если не задан - тень будет четкой.
размер тени | Задает размер тени. Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Необязательный параметр. Если не задан - тень будет такого же размера, что и элемент.
цвет | Задает цвет тени в любых единицах для цвета. Необязательный параметр. Если не задан - цвет тени совпадает с цветом текста.

Смещения по осям, размытие и размер тени задаются в любых единицах для размеров, кроме процентов.

## Пример

В данном примере тень сдвинута вниз и вправо и добавлено небольшое размытие:

`<div id="elem"></div>` `#elem { box-shadow: 5px 5px 3px black; border: 1px solid black; width: 300px; height: 50px; }`

:

## Пример . Четкая тень

В данном примере тень сдвинута вниз и вправо, но размытия нет (тень будет четкой):

`<div id="elem"></div>` `#elem { box-shadow: 2px 2px black; border: 1px solid black; width: 300px; height: 50px; }`

:

## Пример . Равномерная тень

В данном примере тень не сдвинута, но к ней добавлено размытие:

`<div id="elem"></div>` `#elem { box-shadow: 0px 0px 3px black; border: 1px solid black; width: 300px; height: 50px; }`

:

## Пример . Размер тени

В данном примере тень не сдвинута, размытие равно нулю, но к ней добавлен размер (черное - это граница, красное - это тень):

`<div id="elem"></div>` `#elem { box-shadow: 0 0 0 3px red; border: 3px solid black; width: 300px; height: 50px; }`

:

## Пример . Размытие + размер тени

В данном примере тень не сдвинута, но к ней добавлены размытие и размер (черное - это граница, красное - это тень):

`<div id="elem"></div>` `#elem { box-shadow: 0 0 3px 3px black; border: 1px solid black; width: 300px; height: 50px; }`

:

## Пример . Внутренняя тень

В данном примере тень находится внутри контейнера:

`<div id="elem"></div>` `#elem { box-shadow: inset 0 0 6px black; border: 1px solid black; width: 300px; height: 50px; }`

:

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

- свойство `text-shadow`,
  которое задает тень тексту

←→
↑