background-clip

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Описание

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

Если фоновое изображение или цвет не заданы, это свойство будет иметь визуальный эффект, только если у границы есть прозрачные области или частично непрозрачные области (из-за border-style или border-image); в противном случае граница скрывает разницу.

Синтаксис

css
/* Ключевые слова */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/* Глобальные значения */
background-clip: inherit;
background-clip: initial;
background-clip: unset;

Значения

border-box

Фон распространяется до внешнего края границы (но под границей в z-порядке).

padding-box

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

content-box

Фон закрашивается внутри (обрезается) поля содержимого.

text Экспериментальная возможность

Фон закрашивается внутри (обрезается) текста переднего плана.

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

background-clip = 
<visual-box>#

<visual-box> =
content-box |
padding-box |
border-box

Примеры

HTML

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

css
p {
  border: 0.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, 0.2);
}

Результат

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

Specification
CSS Backgrounds and Borders Module Level 3
# background-clip
CSS Backgrounds Module Level 4
# background-clip
Начальное значениеborder-box
Применяется квсе элементы. Это также применяется к ::first-letter и ::first-line.
Наследуетсянет
Обработка значениякак указано
Animation typeповторяющийся список из

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
background-clip
border-area
border-box
content-box
padding-box
text

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Requires a vendor prefix or different name for use.
Has more compatibility info.

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