← Все вопросы
Как сделать тень у блока через box-shadow? Не пойму, что значат все эти цифры
5
Хочу красивую тень под карточкой, как на современных сайтах. Нашёл box-shadow, но там четыре числа подряд и я не понимаю, что каждое значит.
2 ответа
9
✓ Принятый ответ — помог автору
У box-shadow значения идут так: сдвиг по X, сдвиг по Y, размытие, цвет:
.card {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
Разберём:
0— сдвиг вправо (0 = не сдвигаем по горизонтали);4px— сдвиг вниз (тень падает снизу);10px— размытие (чем больше, тем мягче тень);rgba(0,0,0,0.2)— цвет тени, тут чёрный с прозрачностью 20%.
Для мягкой современной тени бери небольшой сдвиг вниз и полупрозрачный чёрный — выглядит аккуратно. Поиграй цифрами, и сразу станет понятно, что на что влияет.
3
Можно добавить пятое число — разброс (spread), он раздувает или сжимает тень. А ключевое слово inset в начале делает тень внутренней (вдавленный эффект). Для старта хватит 4 чисел из ответа выше.
Ваш ответ
Войдите, чтобы ответить на вопрос.