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

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

от madelyn_hintz , в категории: HTML/CSS , 3 года назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от kendall_mckenzie , 3 года назад

Сделать тень в css для блока, можно через свойство box-shadow, пример:


HTML:

1
2
3
<body>
    <div class="square"></div>
</body>


CSS:

1
2
3
4
5
6
.square{
    height: 100px;
    width: 100px;
    background-color: coral;
    box-shadow: 10px 15px 10px rgb(8, 8, 8);
}

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

от ransom_homenick , 2 года назад

@madelyn_hintz 

Чтобы сделать тень у блока в CSS, вы можете использовать свойство "box-shadow":

1
2
3
.block {
  box-shadow: 10px 10px 5px grey;
}


Где:

  • 10px 10px - смещение тени по осям x и y.
  • 5px - размытие тени.
  • grey - цвет тени.


Вы также можете указать несколько теней через запятую:

1
2
3
.block {
  box-shadow: 10px 10px 5px grey, -10px -10px 5px green;
}


Это добавит тень снизу справа с зеленым цветом, а также тень сверху слева с серым цветом.