MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

概要

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

如果没有设置背景颜色或图片,那么这个属性只有在边框(border)设置为透明或半透明时才能看到视觉效果(查看 border-styleborder-image),不然的话,这个属性造成的样式变化会被边框覆盖住。

初始值border-box
适用元素all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

background-clip: border-box
background-clip: padding-box
background-clip: content-box
background-clip: text
background-clip: inherit

border-box
背景延伸到边框外沿(但是在边框之下)。
padding-box
边框下面没有背景,即背景延伸到内边距外沿。
content-box
背景裁剪到内容区 (content-box) 外沿。
text
背景被裁剪为文字的前景色。

示例

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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支持从版本1.1到版本1.9.2,它对应于Firefox 1.0到3.6,包含不同的和前缀的语法: -moz-background-clip: padding | border.

[2] 在Internet Explorer 7中,如果overflow的值为hidden | auto | scroll,则表现像background-clip:padding。

[3] Webkit还支持此属性的前缀版本,在这种情况下,除了当前关键字之外,可替代的同义词是:padding,border和content。

See also

 

文档标签和贡献者

 此页面的贡献者: DPJune, hiyangguo, SphinxKnight, teoli, Sebastianz, iplus26, yan
 最后编辑者: DPJune,