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.

Поддержка браузеров

Свойство background-clip поддерживается во всех основных браузерах.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.