⑥ Область рисования: свойство background-clip

Продолжим изучение темы CSS - фон. Если пропустили прошлые статьи, то вот ссылки на них:

• ① Базовый цвет: свойство background-color
• ② Источник изображения: свойство background-image
• ③ Укладка изображений: свойство background-repeat
• ④ Фиксация изображения: свойство background-attachment
• ⑤ Позиционирование изображений: свойство background-position

Свойство background-clip определяет область рисования фона. Фон всегда рисуется под рамкой элемента, если таковая имеется.

Корневой элемент имеет другую область рисования фона, поэтому свойство background-clip на него не влияет.

Свойство не наследуется.

background-clip

Значения:

• border-box - Фон закрашивает область в пределах рамки элемента. Значение по умолчанию.
• padding-box - Фон закрашивает область в пределах внутренних полей элемента.
• content-box - Фон закрашивает только область содержимого.
• initial - Устанавливает значение свойства в значение по умолчанию.
• inherit - Наследует значение свойства от родительского элемента.

Синтаксис

CSS

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;
background-clip: inherit;
background-clip: initial;

Продолжение в следующей статье!