Как сделать тень у блока в css?

Пользователь

от rodger.botsford , в категории: HTML/CSS , год назад

Как сделать тень у блока в css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от landen.nienow , 5 месяцев назад

@rodger.botsford 

Чтобы создать тень у блока в CSS, можно использовать свойство box-shadow. Оно принимает список параметров, описывающих тень. Пример использования:

1
2
3
.block {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


В приведенном примере тень состоит из двух частей: размытой тени с теневым цветом rgba(0, 0, 0, 0.2) (черный цвет с прозрачностью 20%) и тени с резкими краями с теневым цветом rgba(0, 0, 0, 0.19) (черный цвет с прозрачностью 19%).


Параметры box-shadow:

  • offset-x — смещение тени по горизонтали (положительное значение смещает тень вправо, отрицательное — влево).
  • offset-y — смещение тени по вертикали (положительное значение смещает тень вниз, отрицательное — вверх).
  • blur-radius — радиус размытия тени.
  • spread-radius — распространение тени (положительное значение увелич