Сравним оба варианта создания теней. В конце расскажу, когда какой вариант советую использовать.
Бокс‑тени, box‑shadow
Издревле тень элемента задавали свойством box-shadow. В свойстве указывают смещение тени по вертикали, горизонтали, величину её размытия и цвет:
.box {
box-shadow: 0 10px 30px rgba(0, 175, 240, 75%);
}Опциональный четвертый параметр корректирует размер тени: по умолчанию тень — это размытый прямоугольник размером с элемент. Можно увеличить или уменьшить размеры этого прямоугольника:
.box {
/* Размер тени составит −15 пк с каждой стороны от размера элемента */
box-shadow: 0 10px 30px -15px rgba(0, 175, 240, 75%);
}Ключевое слово inset перед параметрами тени делает её внутренней:
.box {
box-shadow: inset 0 0 30px rgba(0, 175, 240, 75%);
}Фильтр‑тени, filter: drop‑shadow
Свойство filter появилось сильно позже оригинального drop-shadow и позволяет применять к элементу разные графические фильтры и эффекты, в том числе тень.
И если бокс‑тень применяется на уровне блочной модели, строго по границам элемента и без учёта прозрачности внутри:
<img src="star.svg" class="star">
.star {
box-shadow: 0 10px 30px rgba(0, 175, 240, 75%);
}
То фильтр‑тень применяется постэффектом по видимой форме элемента и учитывает его прозрачные области. В этом её ключевое отличие и преимущество перед бокс‑тенью.
<img src="star.svg" class="star">
.star {
filter: drop-shadow(0 10px 30px rgba(0, 175, 240, 75%));
}
В отличие от бокс‑тени, фильтр‑тень не может быть внутренней, и в ней нельзя корректировать размер тени, только величину размытия.
В плане сравнения производительности бокс‑теней и фильтр‑теней всё сложно.
Бокс‑тени давно существуют в ЦСС, являются специализированным инструментом с одной задачей, применяются на раннем этапе отрисовки страницы и хорошо оптимизированы.
Фильтры появились в языке относительно недавно, являются инструментом широкого профиля, применяются на поздних этапах отрисовки, создают отдельные композитные слои.
В зависимости от контекста и устройства читателя, фильтры могут быть как быстрее из‑за аппаратного ускорения композитных слоёв, так и медленнее, например, из‑за пересечения с композитными слоями других эффектов.
По моему опыту, фильтр‑тени чаще глючат и тормозят, особенно на телефонах и слабых ноутбуках. Советую использовать их только когда нужна тень именно по видимой форме элемента, учитывая прозрачность. А в остальных случаях обойтись бокс‑тенью.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.