Свойство box-shadow

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

Синтаксис

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

cssселектор {
  box-shadow: none;
}

Параметры

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

Пример

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

html<div id="elem"></div>

css#elem {
  box-shadow: 5px 5px 3px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

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

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

html<div id="elem"></div>

css#elem {
  box-shadow: 2px 2px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

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

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

html<div id="elem"></div>

css#elem {
  box-shadow: 0px 0px 3px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

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

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

html<div id="elem"></div>

css#elem {
  box-shadow: 0 0 0 3px red;
  border: 3px solid black;
  width: 300px;
  height: 50px;
}

Результат:

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

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

html<div id="elem"></div>

css#elem {
  box-shadow: 0 0 3px 3px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

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

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

html<div id="elem"></div>

css#elem {
  box-shadow: inset 0 0 6px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

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