Урок 07. Рамки, скругления, тени и ring
⚡ Кратко
Рамка — это два класса: толщина (border) и цвет
(border-slate-200). Скругление — rounded-*,
тень — shadow-*, кольцо фокуса — ring-* или
outline-*. Из этих четырёх групп собирается любая карточка,
кнопка и поле формы.
О чём этот урок
Границы и тени отвечают за то, как элементы отделяются друг от друга.
Разберём толщину и стиль рамок, разделители divide-*, шкалу
скруглений, шкалу теней, разницу между ring и outline
(и почему для фокуса лучше второй) и сложим из этого карточку и поле ввода
с честным состоянием фокуса.
Структура урока
Теория
Рамки, радиусы, тени, кольца и когда что использовать.
Справочник
Все классы групп одной таблицей.
Примеры
Карточки, разделители, состояния фокуса.
Старый vs Новый
Что изменилось в v4: ring, outline, тени.
Задания
Собрать карточку и доступное поле ввода.
Решения
Готовые варианты с разбором.
Ошибки
Рамка без цвета, снятый фокус, тени вместо иерархии.
Домашнее задание
Набор карточек с разными «высотами».
Ресурсы
Документация по border, shadow, ring.
Практика
- Сделайте карточку на рамке и такую же — на тени. Сравните.
- Добавьте полю ввода видимый фокус, не убирая доступность.
- Соберите список, где строки разделены линиями без лишних классов.