CSS свойство box-shadow

❮ Назад Вперед ❯

Свойство box-shadow дает возможность добавить одну или несколько теней к блоку, устанавливая следующие значения-color, size, blur, offset и inset. Можно указать параметры через запятую.

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

Есть две значения для установления тени offset. H-offset указывает на горизонтальное расстояние. Положительные значения смещают тень вправо от элемента. Отрицательные значения смещают тень влево от элемента. V-offset указывает на вертикальное расстояние. Положительное значение смещает тень вниз, а отрицательное значение - вверх. Если обе значения равны 0, то тень располагается за элементом.

Третье значение - blur. Чем больше радиус, тем больше размыта тень. Таким образом, тень становится больше и ярче. Отрицательные значения недопустимы. При значении 0 тень будет резкой.

Четвертое значение - inset. Оно добавляет внутреннюю тень к элементу. Если оно является значением по умолчанию, предполагается, что будет эффект падающей тени.

Пятое значение - spread. Положительные значения увеличивают размер тени, а отрицательные значения уменьшают. Если значение 0, то тень и элемент будут одного размера.

Шестое значение - color. Оно добавляет цвет к тени. Если значение 0, цвет будет зависеть от браузера.

При свойстве box-shadow необходимо использовать префиксы -moz- и -webkit- для Mozilla и Webkit.

Значение по умолчанию	none
Применяется	Ко всем элементам, а также к ::first-letter .
Наследуется	Нет
Анимируемое	Да. Тень блока анимируема.
Версия	CSS3
DOM синтаксис	object.style.boxShadow = "15px 25px 35px gray";

Синтаксис

box-shadow: none | h-offset v-offset blur spread color | inset | initial | inherit;

Теперь попробуем добавить тени к элементу.

Пример

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 150px;
      height: 50px;
      background-color: #eee;
      box-shadow: 5px 4px 10px #1c87c9;
      -moz-box-shadow: 5px 4px 10px #1c87c9;
      -webkit-box-shadow: 5px 4px 10px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Пример box-shadow</h2>
    <div></div>
  </body>
</html>

Попробуйте сами!

Добавим несколько теней к блоку:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 50%;
      height: 100px;
      border: 1px solid;
      padding: 10px;
      box-shadow: 5px 5px #1c87c9, 10px 10px #ccc, 15px 15px #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Несколько теней с box-shadow.</h2>
    <div></div>
  </body>
</html>

Попробуйте сами!

Добавим значение inset к элементу. Оно добавляет тень внутри блока:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 150px;
      height: 50px;
      background-color: #eee;
      box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
      -moz-box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
      -webkit-box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
      }
    </style>
  </head>
  <body>
    <h2>Свойство box-shadow со значением inset.</h2>
    <div></div>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
none	Указывает на отсутствие тени.
h-offset	Необходимое значение. Горизонтальное смещение тени. Положительные значения смещают тень вправо от блока. Отрицательные значения смещают тень влево от блока.
v-offset	Необходимое значение. Вертикальное смещение тени. Положительное значение смещает тень вниз, а отрицательное значение - вверх.
blur	Необязательное значение. Тень размыта. Чем больше радиус, тем больше размыта тень.
spread	Необязательное значение. Положительные значения увеличивают размер тени, а отрицательные уменьшают.
inset	Необязательное значение. Внешняя тень становится внутренней.
color	Необязательное значение. Указывает на цвет тени.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.