当前位置：文江博客知识库 en-US 文档 Web CSS background-clip

background-clip - CSS: Cascading Style Sheets 编辑

The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

If the element has no background-image or background-color, this property will only have a visual effect when the border has transparent regions or partially opaque regions (due to border-style or border-image); otherwise, the border masks the difference.

Note: Because the root element has a different background painting area, the background-clip property has no effect when specified on it. See "The backgrounds of special elements."

Note: For documents whose root element is an HTML element: if the computed value of background-image on the root element is none and its background-color is transparent, user agents must instead propagate the computed values of the background properties from that element’s first HTML <body> child element. The used values of that <body> element’s background properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background for the <body> element rather than the HTML element.

Syntax

/* 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;

Values

border-box: The background extends to the outside edge of the border (but underneath the border in z-ordering).
padding-box: The background extends to the outside edge of the padding. No background is drawn beneath the border.
content-box: The background is painted within (clipped to) the content box.
text: The background is painted within (clipped to) the foreground text.

Formal definition

Initial value	`border-box`
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

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

Examples

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);
}

Result

Specifications

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3 The definition of 'background-clip' in that specification.	Candidate Recommendation	Initial definition.
CSS Backgrounds and Borders Module Level 4 The definition of 'background-clip' in that specification.	Editor's Draft	Add `text` value.

Browser compatibility

BCD tables only load in the browser

background-clip - CSS: Cascading Style Sheets 编辑

Syntax

Values

Formal definition

Formal syntax

Examples

HTML

CSS

Result

Specifications

Browser compatibility

See also

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

词条统计

友情链接

background-clip - CSS: Cascading Style Sheets 编辑

Result

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

词条统计

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。