CSS-свойство background-clip

CSS-свойство background-clip определяет, будет ли фон элемента, цвет или изображение, находиться под его границей или нет.

Значение по умолчанию:	`border-box`
Применяется к:	Все элементы. Это также относится к `::first-letter` и `::first-line`
Наследование:	Нет
Анимирование:	Нет. Анимируемые свойства
Версия:	Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

background-clip: border-box | padding-box | content-box | initial | inherit

Примеры написания кода свойства background-clip:

.box {
    width: 250px;
    height: 150px;
    padding: 10px;
    border: 6px dashed #333;
    background: orange;
    background-clip: content-box;
}

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение	Описание
`border-box`	Указывает, что фон распространяется до внешнего края границы. Фон рисуется под границей. Это значение установлено по умолчанию.
`padding-box`	Указывает, что фон распространяется на внешний край отступа. Под границей фон не рисуется.
`content-box`	Указывает, что фон закрашивается только внутри поля содержимого. Под границей и областью отступа фон не рисуется.
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение своего свойства родительского элемента `background-clip`.