Чтобы добавить тень к картинке в CSS, можно использовать свойство box-shadow
. Вот пример кода:
HTML:
<img src="path/to/image.jpg" alt="Описание изображения" class="shadow-image">
CSS:
.shadow-image {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* задаем тень смещением и прозрачностью */
}
В этом примере картинка будет отображена с тенью, которая задана через свойство box-shadow
. Значение 5px
устанавливает расстояние тени от элемента вправо и вниз, 10px
задает размер размытия тени, а rgba(0, 0, 0, 0.5)
— цвет тени и ее прозрачность.
Также можно задать другие параметры тени, такие как цвет, интенсивность, угол и т.д. Например:
.box-shadow {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1),
0 1px 3px rgba(0, 0, 0, 0.08);
/* Задаем несколько теней с разными параметрами */
}
В этом примере заданы две тени, первая с более высокой интенсивностью и меньшим размером размытия, вторая — менее интенсивная и с большим размером размытия.