这篇翻译不完整。请帮忙从英语翻译这篇文章

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 AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
background-clipChrome Full support 1
Full support 1
Full support Yes
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes 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.
Edge Full support 12Firefox Full support 4
Full support 4
Full support 49
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes 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.
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
Full support 15
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes 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.
Safari Full support 3
Notes
Full support 3
Notes
Notes 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.
WebView Android Full support 4.1
Full support 4.1
Full support Yes
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes 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.
Chrome Android Full support Yes
Full support Yes
Full support Yes
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes 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.
Edge Mobile Full support YesFirefox Android Full support 14
Full support 14
Full support 49
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes 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.
Opera Android Full support 12.1
Full support 12.1
Full support 14
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes 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.
Safari iOS Full support YesSamsung Internet Android Full support Yes
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 YesEdge Mobile Full support YesFirefox Android Full support 14Opera Android Full support 12.1Safari iOS Full support YesSamsung Internet Android Full support Yes
text
Experimental
Chrome Full support Yes
Prefixed Notes
Full support Yes
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Edge Full support 15
Full support 15
Full support 12
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
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 Full support Yes
Prefixed Notes
Full support Yes
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Safari Full support Yes
Prefixed Notes
Full support Yes
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
WebView Android Full support Yes
Prefixed Notes
Full support Yes
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Chrome Android Full support Yes
Prefixed Notes
Full support Yes
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Edge Mobile Full support YesFirefox 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 Full support Yes
Prefixed Notes
Full support Yes
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Safari iOS Full support Yes
Prefixed Notes
Full support Yes
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
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.

参见

文档标签和贡献者

最后编辑者: mdnwebdocs-bot,