box-shadow
box-shadow: <x-offset> <y-offset> <blur> <spread> <color>
- x-offset — горизонтальне зміщення. Позитивне значення зміщує тінь праворуч від блоку, негативне – ліворуч. Обов'язкове значення.
- y-offset — вертикальне зміщення. Позитивне значення зміщує тінь вниз, негативне - вгору. Обов'язкове значення.
- blur — радіус розмиття. Чим більше значення, тим сильніше розмита тінь. Необов'язкове значення.
- spread — радіус поширення. Позитивне значення збільшує тінь, негативне — зменшує. Необов'язкове значення.
- color — колір тіні. Можна використовувати будь-який формат запису кольору. Необов'язкове значення.
.box { width: 400px; height: 400px; backgroud-color: red; box-shadow: 10px -10px 10px 12px red; }
Багатошарова тінь
box-shadow: <x-offset> <y-offset> <blur> <spread> <color>, <x-offset> <y-offset> <blur> <spread> <color>, <x-offset> <y-offset> <blur> <spread> <color>,
Можна зробити дкілька тіней
.box { width: 400px; height: 400px; backgroud-color: red; box-shadow: 10px -10px 10px 12px red, -10px 10px 10px 12px blue; }
Зовнішня тінь
box-shadow: unset <x-offset> <y-offset> <blur> <spread> <color>
Внутрішня тінь
Синтаксис оголошення внутрішньої тіні аналогічний синтаксису звичайної тіні, але першим значенням необхідно вказати inset.
box-shadow: inset <x-offset> <y-offset> <blur> <spread> <color>