Этот вопрос проверяет знание о визуальных эффектах.
drop-shadow() — это функция в CSS, используемая для добавления тени к элементам, включая изображения. Она применяется с помощью свойства filter и принимает значения для смещения по оси X, смещения по оси Y, размытия и цвета тени. Эта функция особенно полезна, потому что она позволяет сохранить прозрачные области изображения, создавая естественный и аккуратный эффект тени.
Свойство 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(), чтобы создать более сложные визуальные эффекты.