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-style
或 border-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
实验性-
背景被裁剪成文字的前景色。
标准语法
示例
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 |
初始值 | border-box |
---|---|
适用元素 | 所有元素. It also applies to ::first-letter and ::first-line . |
是否是继承属性 | 否 |
计算值 | as specified |
动画类型 | a repeatable list |
浏览器兼容性
BCD tables only load in the browser
参见
- The
clip-path
property creates a clipping region that defines what part of an entire element should be displayed. - Background properties:
background
,background-color
,background-image
- Introduction to the CSS box model