Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Описание

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

If no background image or color is set, this property will only have a visual effect when the border has transparent regions or partially opaque regions (due to border-style or border-image); otherwise the border covers up the difference.

Синтаксис

/* Keyword values */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/* Global values */
background-clip: inherit;
background-clip: initial;
background-clip: unset;

Значения

border-box
The background extends to the outside edge of the border (but underneath the border in z-ordering).
padding-box
The background extends to the outside edge of the padding. No background is drawn beneath the border.
content-box
The background is painted within (clipped to) the content box.
text 
The background is painted within (clipped to) the foreground text.

Формальный синтаксис

<box>#

где
<box> = border-box | padding-box | content-box

Примеры

HTML

<p class="border-box">The background extends behind the border.</p>
<p class="padding-box">The background extends to the inside edge of the border.</p>
<p class="content-box">The background extends only to the edge of the content box.</p>
<p class="text">The background is clipped to the foreground text.</p>

CSS

p {
  border: .8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
}

.border-box { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }

.text {
  background-clip: text;
  color: rgba(0,0,0,.2);
}

Результат

Спецификации

Спецификация Статус Комментарий
CSS Backgrounds and Borders Module Level 3
Определение 'background-clip' в этой спецификации.
Кандидат в рекомендации Initial definition.
CSS Backgrounds and Borders Module Level 4
Определение 'background-clip' в этой спецификации.
Редакторский черновик Add text value.

Начальное значениеborder-box
Применяется квсе элементы. Это также применяется к ::first-letter и ::first-line.
Наследуетсянет
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Совместимость с браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержкаChrome Полная поддержка 1
Полная поддержка 1
Полная поддержка Да
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Edge Полная поддержка 12Firefox Полная поддержка 4
Полная поддержка 4
Полная поддержка 49
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Нет поддержки 1 — 4
С префиксом Замечания
С префиксом Требует вендорный префикс: -moz-
Замечания Used the -moz-background-clip: padding | border syntax.
IE Полная поддержка 9
Замечания
Полная поддержка 9
Замечания
Замечания In IE 7 and IE 8 of Internet Explorer, this property always behaved like background-clip: padding when overflow was hidden, auto, or scroll.
Opera Полная поддержка 10.5
Полная поддержка 10.5
Полная поддержка 15
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Safari Полная поддержка 3
Замечания
Полная поддержка 3
Замечания
Замечания Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
WebView Android Полная поддержка 4.1
Полная поддержка 4.1
Полная поддержка Да
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Chrome Android Полная поддержка Да
Полная поддержка Да
Полная поддержка Да
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 14
Полная поддержка 14
Полная поддержка 49
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Opera Android Полная поддержка 12.1
Полная поддержка 12.1
Полная поддержка 14
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Safari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
content-boxChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 4IE Полная поддержка 9
Замечания
Полная поддержка 9
Замечания
Замечания In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll
Opera Полная поддержка 10.5Safari Полная поддержка 3WebView Android Полная поддержка 4.1Chrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 14Opera Android Полная поддержка 12.1Safari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
text
Экспериментальная
Chrome Полная поддержка Да
С префиксом Замечания
Полная поддержка Да
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Edge Полная поддержка 15
Полная поддержка 15
Полная поддержка 12
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Firefox Полная поддержка 49
Полная поддержка 49
Полная поддержка 48
Отключено
Отключено From version 48: this feature is behind the layout.css.background-clip-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка Да
С префиксом Замечания
Полная поддержка Да
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Safari Полная поддержка Да
С префиксом Замечания
Полная поддержка Да
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
WebView Android Полная поддержка Да
С префиксом Замечания
Полная поддержка Да
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Chrome Android Полная поддержка Да
С префиксом Замечания
Полная поддержка Да
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 49
Полная поддержка 49
Полная поддержка 48
Отключено
Отключено From version 48: this feature is behind the layout.css.background-clip-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка Да
С префиксом Замечания
Полная поддержка Да
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Safari iOS Полная поддержка Да
С префиксом Замечания
Полная поддержка Да
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

Смотрите также

Метки документа и участники

Внесли вклад в эту страницу: Maxim-Bernashevsky, andreww2012
Обновлялась последний раз: Maxim-Bernashevsky,