Свойства CSS

Меню

background-clip

Поддержка браузерами

12.0+ 9.0+ 4.0+ 4.0+ 10.5+ 3.0+

Описание

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

Значение по умолчанию: border-box
Применяется: ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line
Анимируется: нет
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.backgroundClip="content-box"

Синтаксис

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

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

Значение Описание
border-box Фон заполняет все пространство элемента включая рамку.
padding-box Фон заполняет все пространство элемента до рамки.
content-box Фон охватывает только содержимое элемента.

Пример

CSS Свойство:
background-clip:
Результат:
Неделю назад, когда я счастливый и довольный приехал на этот прииск, мне казалось, что скоро весь мир узнает обо мне, как об обладателе самого огромного состояния. Я думал, что только неудачники не могут здесь найти золото. Рекламой этого места занимались все известные рекламные агентства, они трубили на весь мир, что счастливчики, которым хватить смелости и денег приобрести билет, будут жить безбедно до конца своих дней. Смелость у меня была, а вот в карманах было пусто, что бы набрать нужную сумму, мне пришлось продать единственную ценную вещь - дедушкины золотые часы.
CSS Код:
#myDIV {
padding: 25px;
border: 5px dotted #000000;
background-color: yellow;
background-clip: border-box;
}
Кликните на любое значение свойства, чтобы увидеть результат