box-shadow
Тень вокруг блока элемента.
Синтаксис
box-shadow: x y blur spread color;Значения
| Параметр | Тип | Описание |
|---|---|---|
| x y | length | Смещение по горизонтали и вертикали. |
| blur | length | Радиус размытия. |
| spread | length | Увеличивает или уменьшает тень. |
| color | color | Цвет; естественнее всего выглядит полупрозрачный чёрный. |
| inset | keyword | Тень рисуется внутри элемента. |
Примеры
Внешняя тень и внутренняя линия:
<style>
.card { width: 200px; padding: 16px; border-radius: 8px; margin: 16px; }
</style>
<div class="card" style="box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);">A soft shadow</div>
<div class="card" style="box-shadow: inset 0 0 0 2px royalblue;">An inset line</div>Примечания
Несколько теней перечисляют через запятую — две наложенные мягкие тени выглядят реалистичнее одной. Тень повторяет border-radius и не влияет на раскладку. Для тени по форме прозрачного PNG берите filter: drop-shadow().
См. также
- text-shadow — Тень за буквами текста.
- border-radius — Скругляет углы элемента.
- filter — Графические эффекты элемента: размытие, чёрно-белый режим, яркость, тень по форме.
Вопросы и ответы по теме
В учебнике
- Тени и градиенты — Тени блоков и текста — box-shadow и text-shadow, линейные и радиальные градиенты, точки цвета.