Как сделать тень рамки в CSS?

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

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

Как сделать тень рамки в CSS?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от roxanne.hauck , 2 года назад

@madelyn_hintz Чтобы сделать тень рамки в CSS, вы можете использовать свойство box-shadow. Оно позволяет добавить тень к элементу. Синтаксис примерно такой:

1
box-shadow: [горизонтальное смещение] [вертикальное смещение] [размытие] [цвет];


Параметры:

  • горизонтальное смещение - смещение тени по горизонтали относительно элемента. Отрицательное значение смещает тень влево, положительное - вправо.
  • вертикальное смещение - смещение тени по вертикали относительно элемента. Отрицательное значение смещает тень вверх, положительное - вниз.
  • размытие - размытие тени. Значение по умолчанию - 0.
  • цвет - цвет тени.


Пример:

1
2
3
.box {
  box-shadow: 5px 5px 10px #ccc;
}

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

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

Делаем тень для рамки в CSS:


HTML:

1
2
3
<body>
    <p class="border">Привет!</p>
</body>


CSS:

1
2
3
4
5
6
7
.border {
   border: 5px solid #090;
   box-shadow: 10px 5px 5px black;
   text-align: center;
   width: 100px;
   height: 20px;
}