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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от landen.nienow , год назад

@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 — распространение тени (положительное значение увелич

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

от clifford , 8 месяцев назад

@rodger.botsford 

Есть несколько способов создания теней у блока в CSS, вот некоторые из них:

  1. Использование свойства box-shadow:
1
box-shadow: 0 0 5px rgba(0,0,0,0.5);


  1. Использование свойства text-shadow (для создания тени у текста):
1
text-shadow: 0 0 5px rgba(0,0,0,0.5);


  1. Использование псевдоэлемента ::before (для создания тени у самого блока):
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
.block {
  position: relative;
}

.block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
  z-index: -1;
}


Выбор способа зависит от конкретной задачи и требуемого эффекта.