CSS box-shadow — синтаксис и примеры
CSS-свойство box-shadow: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
Практический смысл
Для «box-shadow» важно отделить назначение от случайного оформления. Свойство box-shadow относится к области «цвет и отрисовка» и применяется на этапе отрисовки после расчёта геометрии и может создавать дополнительные слои. При проверке на странице при увеличении текста до 200% сначала зафиксируйте победившую декларацию во вкладке Computed для «box-shadow», затем фиксируйте ожидаемое состояние до открытия DevTools.
Для «box-shadow» сначала проверьте вычисленное значение box-shadow, наследование и контекст родителя. После этого сравните исходное и изменённое состояние «box-shadow» на одном и том же содержимом.
Синтаксис box-shadow
Минимальная запись «box-shadow» нужна для отделения самой возможности от стилей и разметки проекта. Проверьте фрагмент отдельно перед переносом.
.demo {
box-shadow: 0 1rem 2rem rgb(15 23 42 / 15%);
}Как работает box-shadow
Механика «box-shadow» начинается с допустимого контекста и заканчивается наблюдаемым результатом. Свойство box-shadow относится к области «цвет и отрисовка» и применяется на этапе отрисовки после расчёта геометрии и может создавать дополнительные слои; для «box-shadow» отдельно проверьте победившую декларацию во вкладке Computed.
Проверка в проекте
- Проверьте вычисленное значение box-shadow, наследование и контекст родителя; результат относится непосредственно к «box-shadow».
- Проверить ширину 320 px без горизонтальной прокрутки всей страницы при разборе «box-shadow».
- Проверьте «box-shadow» на странице при увеличении текста до 200% через победившую декларацию во вкладке Computed и запишите наблюдаемое изменение.
Критерий выбора «box-shadow» — предсказуемая работа в заявленном контексте. Для «box-shadow» подтвердите её через победившую декларацию во вкладке Computed и соблюдите ограничение: фиксируйте ожидаемое состояние до открытия DevTools.
Практика с box-shadow
Создайте два варианта «box-shadow» в изолированном демо: корректный и с одной типичной ошибкой. Сравните варианты «box-shadow» через победившую декларацию во вкладке Computed и объясните различие.
Сценарий: на странице при увеличении текста до 200%.
Ошибки при работе с box-shadow
Каскад
Изолированная декларация box-shadow без связанных ограничений может дать другой результат в реальном компоненте — это предметный риск для «box-shadow».
Поддержка
Скрытие фокуса без равноценной заметной замены при использовании «box-shadow».
Контекст
Загрузка тяжёлого ресурса до того, как он нужен пользователю; для «box-shadow» проверьте это отдельно.
Поддержка box-shadow
Для «box-shadow» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «box-shadow»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о box-shadow
Как понять, что «box-shadow» выбрано правильно?
«box-shadow» выбрано правильно, когда оно решает задачу «определять визуальный слой элемента без изменения смысловой структуры документа», сохраняет результат на странице при увеличении текста до 200% и проходит предметную проверку: проверьте вычисленное значение box-shadow, наследование и контекст родителя.
Нужен ли запасной вариант для «box-shadow»?
Запасной вариант для «box-shadow» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «box-shadow» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.