就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. CSS
  3. background-clip

在此页

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.

若元素没有 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.

注意： 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. "

注意： 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.

句法 

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

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.

形式定义

初始值 border-box
适用于 所有元素。它还适用于 ::first-letter and ::first-line .
继承 no
计算值 如指定
动画类型 discrete

形式句法 

<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
The definition of 'background-clip' in that specification. 		候选推荐 初始定义。
CSS Backgrounds and Borders Module Level 4
The definition of 'background-clip' in that specification. 		编者草案 Add text 值。

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
background-clip Chrome 完整支持 1
完整支持 1
不支持 1 — 64 Prefixed 注意事项
Prefixed Implemented with the vendor prefix: -webkit-
注意事项 Chrome accepts alternate synonyms to its values: padding , border ，和 content .
Edge 完整支持 12 Firefox 完整支持 4
完整支持 4
Prefixed Implemented with the vendor prefix: -webkit-
不支持 1 — 4 Prefixed 注意事项
Prefixed Implemented with the vendor prefix: -moz-
注意事项 Used the -moz-background-clip: padding | border 句法。
IE 完整支持 9 注意事项
完整支持 9 注意事项
注意事项 In IE 7 and IE 8 of Internet Explorer, this property always behaved like background-clip: padding when overflow was hidden , auto ，或 scroll .
Opera 完整支持 10.5
完整支持 10.5
不支持 15 — 51 Prefixed 注意事项
Prefixed Implemented with the vendor prefix: -webkit-
注意事项 Opera accepts alternate synonyms to its values: padding , border ，和 content .
Safari 完整支持 3 Prefixed 注意事项
完整支持 3 Prefixed 注意事项
Prefixed Implemented with the vendor prefix: -webkit-
注意事项 Safari accepts alternate synonyms to its values: padding , border ，和 content .
WebView Android 完整支持 4.1
完整支持 4.1
不支持 ≤37 — 64 Prefixed 注意事项
Prefixed Implemented with the vendor prefix: -webkit-
注意事项 WebView accepts alternate synonyms to its values: padding , border ，和 content .
Chrome Android 完整支持 18
完整支持 18
不支持 18 — 64 Prefixed 注意事项
Prefixed Implemented with the vendor prefix: -webkit-
注意事项 Chrome accepts alternate synonyms to its values: padding , border ，和 content .
Firefox Android 完整支持 14 Opera Android 完整支持 11
完整支持 11
不支持 14 — 47 Prefixed 注意事项
Prefixed Implemented with the vendor prefix: -webkit-
注意事项 Opera accepts alternate synonyms to its values: padding , border ，和 content .
Safari iOS 完整支持 1 Prefixed 注意事项
完整支持 1 Prefixed 注意事项
Prefixed Implemented with the vendor prefix: -webkit-
注意事项 Safari accepts alternate synonyms to its values: padding , border ，和 content .
Samsung Internet Android 完整支持 1.0
完整支持 1.0
不支持 1.0 — 9.0 Prefixed 注意事项
Prefixed Implemented with the vendor prefix: -webkit-
注意事项 Chrome accepts alternate synonyms to its values: padding , border ，和 content .
content-box Chrome 完整支持 1 Edge 完整支持 12 Firefox 完整支持 4 IE 完整支持 9 注意事项
完整支持 9 注意事项
注意事项 In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll
Opera 完整支持 10.5 Safari 完整支持 3 WebView Android 完整支持 4.1 Chrome Android 完整支持 18 Firefox Android 完整支持 14 Opera Android 完整支持 11 Safari iOS 完整支持 1 Samsung Internet Android 完整支持 1.0
text Chrome 部分支持 3 注意事项
部分支持 3 注意事项
注意事项 This value is supported with the prefixed version of the property only.
注意事项 According to the WebKit blog , text decorations or shadows are not included in the clipping.
Edge 完整支持 15
完整支持 15
部分支持 12 注意事项
注意事项 Before Edge 15, this value was supported with the prefixed version of the property only.
Firefox 完整支持 49
完整支持 49
完整支持 48 Disabled
Disabled ). To change preferences in Firefox, visit
IE 不支持 No Opera 部分支持 15 注意事项
部分支持 15 注意事项
注意事项 This value is supported with the prefixed version of the property only.
注意事项 According to the WebKit blog , text decorations or shadows are not included in the clipping.
Safari 部分支持 4 注意事项
部分支持 4 注意事项
注意事项 This value is supported with the prefixed version of the property only.
注意事项 According to the WebKit blog , text decorations or shadows are not included in the clipping.
WebView Android 部分支持 ≤37 注意事项
部分支持 ≤37 注意事项
注意事项 This value is supported with the prefixed version of the property only.
注意事项 According to the WebKit blog , text decorations or shadows are not included in the clipping.
Chrome Android 部分支持 18 注意事项
部分支持 18 注意事项
注意事项 This value is supported with the prefixed version of the property only.
注意事项 According to the WebKit blog , text decorations or shadows are not included in the clipping.
Firefox Android 完整支持 49
完整支持 49
完整支持 48 Disabled
Disabled ). To change preferences in Firefox, visit
Opera Android 部分支持 14 注意事项
部分支持 14 注意事项
注意事项 This value is supported with the prefixed version of the property only.
注意事项 According to the WebKit blog , text decorations or shadows are not included in the clipping.
Safari iOS 部分支持 3.2 注意事项
部分支持 3.2 注意事项
注意事项 This value is supported with the prefixed version of the property only.
注意事项 According to the WebKit blog , text decorations or shadows are not included in the clipping.
Samsung Internet Android 部分支持 1.0 注意事项
部分支持 1.0 注意事项
注意事项 This value is supported with the prefixed version of the property only.
注意事项 According to the WebKit blog , text decorations or shadows are not included in the clipping.

图例

完整支持

完整支持

部分支持

部分支持

不支持

不支持

见实现注意事项。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

要求使用供应商前缀或不同名称。

要求使用供应商前缀或不同名称。

另请参阅

元数据

  • 最后修改：
  1. CSS
  2. CSS 参考
  3. CSS Backgrounds and Borders
  4. 指南
    1. Resizing background images with background-size
    2. Using multiple backgrounds
  5. 特性
    1. background
    2. background-attachment
    3. background-clip
    4. background-color
    5. background-image
    6. background-origin
    7. background-position
    8. background-position-x
    9. background-position-y
    10. background-repeat
    11. background-size
    12. border
    13. border-bottom
    14. border-bottom-color
    15. border-bottom-left-radius
    16. border-bottom-right-radius
    17. border-bottom-style
    18. border-bottom-width
    19. border-color
    20. border-image
    21. border-image-outset
    22. border-image-repeat
    23. border-image-slice
    24. border-image-source
    25. border-image-width
    26. border-left
    27. border-left-color
    28. border-left-style
    29. border-left-width
    30. border-radius
    31. border-right
    32. border-right-color
    33. border-right-style
    34. border-right-width
    35. border-style
    36. border-top
    37. border-top-color
    38. border-top-left-radius
    39. border-top-right-radius
    40. border-top-style
    41. border-top-width
    42. border-width
    43. box-shadow

Copyright  © 2014-2026 乐数软件    

工业和信息化部： 粤ICP备14079481号-1