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

Описание

Свойство 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
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

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

ВозможностьChromeEdgeFirefoxInternet ExplorerOperaSafari
Базовая поддержка1112429310.531
content-box112429410.53
text Да -webkit- 5

12 -webkit- 5

15

496 Нет Да -webkit- 5 Да -webkit- 5
ВозможностьAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Базовая поддержка4.1 Да Да1412.1 Да Да
content-box4.1 Да Да1412.1 Да Да
text ? ? Да496 Да -webkit- 5 Да -webkit- 5 ?

1. 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.

2. Firefox supported, from version 1 to 3.6 included, a different and prefixed syntax: -moz-background-clip: padding | border.

3. In IE 7 and IE 8 of Internet Explorer, this property always behaved like background-clip: padding when overflow was hidden, auto, or scroll.

4. In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll

5. Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.

6. In Firefox 48, it was not activated by default and its support could be activated by setting layout.css.background-clip-text.enabled pref to true.

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

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

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