Начало распродаж · Скидка на доставку · Поступление новой коллекции

BELAYA KASKA / FEATURE

designАвтор: Пуск‑Медиа (импорт)Просмотры: 3

background-origin: где начинается фон кнопки

padding-box vs border-box для иконок в border.

Изображение статьи: background-origin: где начинается фон кнопки

background-origin: padding-box рисует фон от внутреннего края border — полезно, когда border прозрачный, а фон не должен залезать под рамку.

Пару с background-clip — origin задаёт начало координат, clip обрезает видимую область.

- [background-origin — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin) — content-box, padding-box, border-box.

- [Backgrounds — web.dev Learn CSS](https://web.dev/learn/css/backgrounds) — origin и clip.

---

## Паттерн

Для background-size: contain иконки в кнопке задайте origin и position вместе — иначе иконка «плывёт» при смене padding.

#CSS#фон#UI

Мы используем обязательные cookie для работы сайта (корзина, вход, оформление заказа) и необязательные — для аналитики и маркетинга. Вы можете принять все, отклонить необязательные или настроить категории. Подробнее в политике cookies.