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

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

Браузеры для ПК
Internet Explorer Chrome Opera Safari Firefox Edge
9+ 1.0+ 10.5+ 3.0+ 4+ 12+
Браузеры для планшетов и мобильных устройств
Android webview Chrome для Android Edge Mobile Firefox для Android Opera для Android iOS Safari Samsung Internet
4.1+ Да Да 14+ 12.1+ Да Да

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

Значение по умолчанию border-box
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Реализация в javascript Добавление стиля непосредственно самому элементу
document.getElementById('idElement').setAttribute('style','background-clip: padding-box');
в данном случае элементу с id='idElement' будет добавлен стиль
background-clip: padding-box;
Результат будет следующий, допустим id='idElement' имеет тег div, тогда:
<div id="idElement" style="background-clip:padding-box;">...</div>
Реализация в jQuery Добавление стиля непосредственно самому элементу
$('#idElement').css(background-clip,'padding-box');
в данном случае элементу с id='idElement' будет добавлен стиль
background-clip: padding-box;
Результат будет следующий, допустим id='idElement' имеет тег div, тогда:
<div id="idElement" style="background-clip:padding-box;">...</div>

Поддерживающие версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Данный параметр устанавливает, как цвет фона или фоновая картинка должна выводиться относительно границ элемента или являться цветом свойства color.

Синтаксис

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

Например:

... background-clip: border-box; или background-clip: text; ...

Значения

padding-box

Фон распространяется до внешнего края отступа. Под границей фон не рисуется.

border-box

Фон отображается до внешнего края границы элемента. Рисуется в том числе и под границей.

content-box

Фон отображается(обрезается) только внутри контента (текста)

text Вместо свойства color к тексту будет применен цвет фона или изображение

Пример

background-clip:padding-box;
background-clip:border-box;
background-clip:content-box;
color:transparent; background-clip:text; -webkit-background-clip:text;

Результат

В этом блоке показан пример использования свойства background-clip:padding-box;.