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

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

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

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