Энциклопедия CSS: box-shadow
box-shadow — CSS-свойство, которое добавляет тень к элементу.
Свойство используют для оформления карточек, кнопок, модальных окон, изображений, выпадающих меню и других элементов интерфейса.
Синтаксис
selector {
box-shadow: смещение-x смещение-y размытие цвет;
}
Пример:
.box {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
В этом случае элемент получит мягкую тень снизу.
Основные параметры
В записи box-shadow обычно указывают несколько значений:
- первое значение — смещение тени по горизонтали;
- второе значение — смещение тени по вертикали;
- третье значение — радиус размытия;
- четвёртое значение — цвет тени.
.card {
box-shadow: 4px 6px 16px rgba(0, 0, 0, 0.25);
}
Положительное горизонтальное смещение двигает тень вправо, отрицательное — влево. Положительное вертикальное смещение двигает тень вниз, отрицательное — вверх.
Радиус распространения
Дополнительно можно указать радиус распространения тени:
.box {
box-shadow: 0 4px 12px 3px rgba(0, 0, 0, 0.2);
}
Четвёртое числовое значение увеличивает или уменьшает размер тени до размытия.
Внутренняя тень
Значение inset делает тень внутренней:
.box {
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25);
}
Такой вариант используют для полей ввода, нажатых кнопок и декоративных блоков.
Живой пример
Несколько теней
Для одного элемента можно указать несколько теней через запятую:
.box {
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.18),
0 10px 24px rgba(0, 0, 0, 0.12);
}
Этот приём помогает сделать тень более естественной.
Отключение тени
Чтобы убрать тень, используют значение none:
.box {
box-shadow: none;
}
Статьи про другие свойства CSS
Энциклопедия CSS | |
|---|---|
| Текст и шрифты: | |
| Размеры и отступы: | |
| Фоновые свойства: | |
| Позиционирование и отображение: | |
| Анимации и переходы: | |
| Границы и тени: | |
| Гриды и флексы: | |
| Прочие свойства: | |
