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.

background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。

尝试一下

如果没有设置背景图片(background-image)或背景颜色(background-color),那么这个属性只有在边框( border)被设置为非固实(soild)、透明或半透明时才能看到视觉效果(与 border-styleborder-image 有关),否则,本属性产生的样式变化会被边框覆盖。

语法

css
/* 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

背景延伸至边框外沿(但是在边框下层)。

padding-box

背景延伸至内边距(padding)外沿。不会绘制到边框处。

content-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;
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0.2);
}

结果

规范

Specification
CSS Backgrounds and Borders Module Level 3
# background-clip
CSS Backgrounds and Borders Module Level 4
# background-clip
初始值border-box
适用元素所有元素. It also applies to ::first-letter and ::first-line.
是否是继承属性
计算值as specified
动画类型a repeatable list

浏览器兼容性

BCD tables only load in the browser

参见