background-clip

Обновлено: 08.12.2022

background-clip

Определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.

Краткая информация

Значение по умолчанию border-box
Наследуется Нет
Применяется Ко всем элементам
Анимируется Нет

Синтаксис

background-clip: [padding-box | border-box | content-box | text]#

Значения

padding-box Фон отображается внутри границ.
border-box Фон выводится под границами.
content-box Фон отображается только внутри контента.
text Фон отображается только внутри текста.

Значений может быть несколько (для каждого из множественных фоновых рисунков), при этом значения разделяются между собой запятой.

Пример

Объектная модель

Объект.style.backgroundClip

Примечание

Firefox до версии 4 поддерживает свойство -moz-background-clip и значения padding и border.

В Chrome, Safari, Opera и Android значение text работает только со свойством -webkit-background-clip.

Браузеры

background-clip

Посмотреть совместимость на Can I use?

background-clip