Как сделать тень у блочного элемента используя CSS свойство box-shadow

25.08.2019

CSS свойство box-shadow поддерживается всеми современными браузерами и используется для создания тени у блочных (div-подобных) элементов.

.box-shadow {
  -moz-box-shadow:    inset 5px 5px 5px 5px #ccc;
  -webkit-box-shadow: inset 5px 5px 5px 5px #ccc;
  box-shadow:         inset 5px 5px 5px 5px #ccc;
}

Значения свойства:

  1. По умолчанию тень снаружи элемента, inset – если нужно, чтобы тень была внутри.
  2. Смещение по оси x
  3. Смещение по оси y
  4. Радиус размытия тени – опционально.
  5. Размер тени – опционально.
  6. Цвет

Тень внутри:

 

Тень снаружи:

 

Если нужно чтобы тень была только с одной стороны элемента, необходимо задать отрицательное значения у размера тени:

.box-shadow {
  -moz-box-shadow:    0 10px 5px -5px #ccc;
  -webkit-box-shadow: 0 10px 5px -5px #ccc;
  box-shadow:         0 10px 5px -5px #ccc;
}

Тень снизу:

 

« список статей