Как сделать тень, падающую по границе изображения?

Свойство drop-shadow() является частью спецификации CSS и используется для добавления тени к элементам с прозрачным фоном. Оно идеально подходит для изображений, поскольку может придавать им более выразительный вид. В отличие от традиционного свойства box-shadow, которое применяется ко всему блоку, drop-shadow() фокусируется на видимых пикселях элемента, что позволяет избежать ненужного наложения на прозрачные области.

Синтаксис:

filter: drop-shadow(offset-x offset-y blur-radius color); 

•  offset-x: смещение тени по горизонтали.

•  offset-y: смещение тени по вертикали.

•  blur-radius: радиус размытия тени.

•  color: цвет тени.

Пример использования:

img {
	filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
} 

В этом примере тень будет смещена на 5 пикселей вправо и вниз, с радиусом размытия 10 пикселей и полупрозрачным черным цветом.

Функция drop-shadow() можно также комбинировать с другими фильтрами, такими как blur() или brightness(), чтобы создать более сложные визуальные эффекты.