概要
background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框下面。
如果没有设置背景颜色或图片，那么这个属性只有在边框（border）设置为透明或半透明时才能看到视觉效果（查看 border-style 或 border-image），不然的话，这个属性造成的样式变化会被边框覆盖住。
| 初始值 | border-box |
|---|---|
| 适用元素 | all elements. It also applies to ::first-letter and ::first-line. |
| 是否是继承属性 | 否 |
| 适用媒体 | visual |
| 计算值 | as specified |
| 是否适用于 CSS 动画 | 否 |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
background-clip: border-box background-clip: padding-box background-clip: content-box background-clip: inherit
值
border-box- 背景延伸到边框外沿（但是在边框之下）。
padding-box- 边框下面没有背景，即背景延伸到内边距外沿。
content-box- 背景裁剪到内容区 (
content-box)外沿。
示例
HTML content
<p class="border-box">The yellow background extends behind the border.</p> <p class="padding-box">The yellow background extends to the inside edge of the border.</p> <p class="content-box">The yellow background extends only to the edge of the content box.</p>
CSS content
p {
border: 5px navy;
border-style: dotted double;
margin: 1em;
padding: 2em;
background: #F8D575;
}
.border-box { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }
Output
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 background-clip |
Candidate Recommendation |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 [3] | 4.0 (2.0) [1] | 9.0 [2] | 10.5 | 3.0 (522) [3] |
content-box |
1.0 [3] | 4.0 (2.0) [1] | 9.0 [2] | (Yes) | 3.0 (522) [3] |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 4.1 | 14.0 (14) | 7.1 | 12.1 | (Yes) |
content-box |
4.1 | 14.0 (14) | 7.1 | 12.1 | (Yes) |
[1] Gecko supported, from version 1.1 to version 1.9.2, which corresponds to Firefox 1.0 to 3.6 included, a different, and prefixed, syntax: -moz-background-clip: padding | border.
[2] Internet Explorer 7, but not other versions of Internet Explorer,behaves like background-clip:padding if overflow: hidden | auto | scroll.
[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.
See also