background-clip: граница закрашивания фона
background-clip определяет, до какой части коробки распространяется фон: границы, внутренних отступов или содержимого.
Назначение
background-clip определяет, до какой части коробки распространяется фон: границы, внутренних отступов или содержимого.
Как это работает
content-box ограничивает закраску областью содержимого, padding-box включает внутренние отступы. Это свойство отвечает за отсечение фона и отличается от background-origin, задающего область позиционирования.
Пример
<style>
.sample{padding:20px;border:12px dashed #789;background:#d5e9de;background-clip:content-box}
</style>
<div class="sample">Фон только под областью содержимого.</div>Что должно получиться
Внутренние отступы остаются без зелёной заливки, хотя продолжают занимать место. Изменение области закраски не меняет размеры текста и рамки.
Граница применения и частая ошибка
Не путайте прозрачную границу с отсутствием границы: она всё ещё занимает место. Проверяйте совместно padding, border и box-sizing, если размеры расходятся с ожиданием.
Самостоятельная проверка
Сравните content-box, padding-box и border-box при одной толщине рамки. Отметьте, какие части коробки остаются незакрашенными в каждом варианте.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.