Свойство box-shadow: тени
Как добавить мягкую тень карточке, не меняя размеры раскладки.
Как это работает
box-shadow рисует одну или несколько теней вокруг блока. Обычная внешняя тень не занимает место и не раздвигает соседние элементы. Запись включает смещение по двум осям, размытие, при необходимости растяжение и цвет.
Для спокойного интерфейса выбирайте небольшую непрозрачность и не слишком большой радиус. Тень помогает показать подъём поверхности, но не должна быть единственным способом различить поля формы или активное состояние.
Пример в интерфейсе
.card { padding: 24px; margin: 12px; border-radius: 12px; background: white; box-shadow: 0 6px 20px rgb(20 50 35 / 12%); }Значения и поведение
| Значение или правило | Результат |
|---|---|
| offset-x / offset-y | Смещение тени по горизонтали и вертикали. |
| blur-radius | Радиус размытия, неотрицательный. |
| spread-radius | Расширение или сжатие силуэта. |
| inset | Внутренняя тень. |
На что обратить внимание
Большие размытые тени на множестве движущихся элементов могут ухудшить плавность. Проверяйте реальную страницу, особенно на слабом устройстве.
Проверьте на практике
Сравните тень с размытием 8px и 30px. Уменьшите непрозрачность так, чтобы текст оставался главным элементом карточки.
Связанные темы: border-radius, background.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.