Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

background-clip

概要

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

如果没有设置背景颜色或图片,那么这个属性只有在边框(border)设置为透明或半透明时才能看到视觉效果(查看 border-styleborder-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

 

文档标签和贡献者

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