⚡️Привет! Сегодня разбираемся с разницей свойства box-shadow и фильтра drop-shadow.
Свойство box-shadow добавляет к блоку одну или несколько теней. Оно принимает либо значение none, что означает отсутствие теней, либо список теней, разделенных запятыми в порядке от переднего к заднему.
drop-shadow применяет эффект падающей тени к входному изображению. Тень представляет собой размытую смещенную версию альфа-маски входного изображения, нарисованную определенным цветом и расположенную под изображением. Значения интерпретируются как для box-shadow, но с опциональным третьим вариантом, который является стандартным отклонением, а не радиусом размытия.
📎 В чём же разница?
box-shadow дает нам тень, охватывающую весь элемент, даже если элемент не имеет фона.
drop-shadow применяется не к самому элементу, а к его визуальному представлению, включая прозрачные части и создает тень только от непрозрачных частей элемента. Помимо этого, drop-shadow не поддерживает ключевое слово inset, которое превращает тень из внешней во внутреннюю.
Радиус размытия в свойстве box-shadow в CSS определяет, насколько сильно тень будет размыта и растянута относительно элемента: чем больше значение радиуса, тем больше тень и тем меньше её чёткость.
С другой стороны, стандартное отклонение в drop-shadow аналогично радиусу размытия в box-shadow. Но, поскольку drop-shadow применяется к визуальному изображению элемента, эффект может выглядеть иначе, особенно если элемент имеет прозрачные области.
Пример использования:
.drop_shadow {
filter: drop-shadow(0 0 16px #000);
}.box_shadow {
box-shadow: 0px 0px 16px #000;
}