background-clip

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

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

语法

/* 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 
背景被裁剪成文字的前景色。

标准语法

<box>#

where
<box> = border-box | padding-box | content-box

示例

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

p {
  border: .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,.2);
}

结果

规范

规范 状态 备注
CSS Backgrounds and Borders Module Level 3
background-clip
Candidate Recommendation Initial definition.
CSS Backgrounds and Borders Module Level 4
background-clip
Editor's Draft Add text value.
初始值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

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
background-clipChrome Full support 1
Full support 1
No support 1 — 64
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Chrome accepts alternate synonyms to its values: padding, border, and content.
Edge Full support 12Firefox Full support 4
Full support 4
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 1 — 4
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes Used the -moz-background-clip: padding | border syntax.
IE Full support 9
Notes
Full support 9
Notes
Notes In IE 7 and IE 8 of Internet Explorer, this property always behaved like background-clip: padding when overflow was hidden, auto, or scroll.
Opera Full support 10.5
Full support 10.5
No support 15 — 51
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Opera accepts alternate synonyms to its values: padding, border, and content.
Safari Full support 3
Prefixed Notes
Full support 3
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Safari accepts alternate synonyms to its values: padding, border, and content.
WebView Android Full support 4.1
Full support 4.1
No support ≤37 — 64
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes WebView accepts alternate synonyms to its values: padding, border, and content.
Chrome Android Full support 18
Full support 18
No support 18 — 64
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Chrome accepts alternate synonyms to its values: padding, border, and content.
Firefox Android Full support 14
Full support 14
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Opera Android Full support 11
Full support 11
No support 14 — 47
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Opera accepts alternate synonyms to its values: padding, border, and content.
Safari iOS Full support 1
Prefixed Notes
Full support 1
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Safari accepts alternate synonyms to its values: padding, border, and content.
Samsung Internet Android Full support 1.0
content-boxChrome Full support 1Edge Full support 12Firefox Full support 4IE Full support 9
Notes
Full support 9
Notes
Notes In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll
Opera Full support 10.5Safari Full support 3WebView Android Full support 4.1Chrome Android Full support 18Firefox Android Full support 14Opera Android Full support 11Safari iOS Full support 1Samsung Internet Android Full support 1.0
text
Experimental
Chrome Partial support 3
Notes
Partial support 3
Notes
Notes This value is supported with the prefixed version of the property only.
Notes According to the WebKit blog, text decorations or shadows are not included in the clipping.
Edge Full support 15
Full support 15
Partial support 12
Notes
Notes Before Edge 15, this value was supported with the prefixed version of the property only.
Firefox Full support 49
Full support 49
Full support 48
Disabled
Disabled From version 48: this feature is behind the layout.css.background-clip-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Partial support 15
Notes
Partial support 15
Notes
Notes This value is supported with the prefixed version of the property only.
Notes According to the WebKit blog, text decorations or shadows are not included in the clipping.
Safari Partial support 4
Notes
Partial support 4
Notes
Notes This value is supported with the prefixed version of the property only.
Notes According to the WebKit blog, text decorations or shadows are not included in the clipping.
WebView Android Partial support ≤37
Notes
Partial support ≤37
Notes
Notes This value is supported with the prefixed version of the property only.
Notes According to the WebKit blog, text decorations or shadows are not included in the clipping.
Chrome Android Partial support 18
Notes
Partial support 18
Notes
Notes This value is supported with the prefixed version of the property only.
Notes According to the WebKit blog, text decorations or shadows are not included in the clipping.
Firefox Android Full support 49
Full support 49
Full support 48
Disabled
Disabled From version 48: this feature is behind the layout.css.background-clip-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Partial support 14
Notes
Partial support 14
Notes
Notes This value is supported with the prefixed version of the property only.
Notes According to the WebKit blog, text decorations or shadows are not included in the clipping.
Safari iOS Partial support 3.2
Notes
Partial support 3.2
Notes
Notes This value is supported with the prefixed version of the property only.
Notes According to the WebKit blog, text decorations or shadows are not included in the clipping.
Samsung Internet Android Partial support 1.0
Notes
Partial support 1.0
Notes
Notes This value is supported with the prefixed version of the property only.
Notes According to the WebKit blog, text decorations or shadows are not included in the clipping.

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

参见