Свойство box-shadow

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

Синтаксис

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

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

Параметри

Параметър	Описание
`inset`	Незадължителен параметър. Ако е зададен, сянката ще бъде вътре в контейнера, ако не е зададен - ще бъде отвън.
отместване по x	Задава отместване на сянката по оста X. Положителна стойност отмества надясно, отрицателна - наляво.
отместване по y	Задава отместване на сянката по оста Y. Положителна стойност отмества надолу, отрицателна - нагоре.
размазване	Задава размазване на сянката. Колкото по-голяма е стойността - толкова по-размазана ще бъде сянката. Незадължителен параметър. Ако не е зададен - сянката ще бъде ясна.
размер на сянката	Задава размер на сянката. Положителна стойност разтяга сянката, отрицателна, обратно, я свива. Незадължителен параметър. Ако не е зададен - сянката ще бъде с същия размер като елемента.
цвят	Задава цвят на сянката във всякакви единици за цвят. Незадължителен параметър. Ако не е зададен - цветът на сянката съвпада с цвета на текста.

Отместванията по осите, размазването и размерът на сянката се задават във всякакви единици за размери, с изключение на проценти.

Пример

В този пример сянката е отместена надолу и надясно и е добавено леко размазване:

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;
}

Результат:

Вижте също

свойство text-shadow,
което задава сянка на текст