Заполнение фона: background-clip

background-clip

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 1.0 4.0 9.0 11.5 3.0
Мобильные браузеры Android Firefox Mobile IE Phone Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 4.1 14.0 7.1 12.1 5.1
Свойство
background-clip — это свойство позволяет определить область заполнения фона
Описание
В зависимости от значения свойства изображение заполнит область контента вместе с отступом элемента — padding-box, только область контента — content-box или же область контента, область элемента и границу рамки — border-box
Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
Ко всем элементам, это значит что применяется и к блочным, и к встроенным, и к табличным и т.д.
Может принимать значения
border-box | padding-box | content-box | inherit
Значение по умолчанию
border-box
Правила записи
свойство: значение;
Примеры

<div>

В этом контейнере фон будет заполняться до границы блока

</div>

<div>

В этом контейнере фон будет заполняться до границы отступа

<div>

<div>

В этом контейнере фон будет заполняться до границы контента

<div>

<div>

Это значит что свойство наследует значение от родителя

<div>

Поделиться