CSS background-clip 属性指定 background-color 和 background-image 应该离元素多远。
如果元素没有background-image或者background-color，则该属性只有在边框有透明区域或者部分不透明区域时才有视觉效果，否则边框显示差异。
background-clip 属性是 CSS3 属性之一。
为了将背景剪辑到文本，还有一个以供应商为前缀的 background-clip 属性版本。
| 初始值 | border-box |
|---|---|
| 应用于 | 所有元素。它也适用于：::first-letter和 ::first-line |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3 |
| DOM 语法 | object.style.backgroundClip=“content-box”； |
语法
background-clip: border-box | padding-box | content-box | text | initial | inherit;
background-clip 属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example {
border: 3px solid #666;
padding: 15px;
background: #ccc;
background-clip: content-box;
}
</style>
</head>
<body>
<h2>Background-clip property example</h2>
<p>使用值 "content-box" </p>
<div id="example">
<p>背景延伸到内容框的边缘。</p>
</div>
</body>
</html>
在以下示例中，找出“padding-box”和“border-box”值之间的差异。
具有 "padding-box" 和 "border-box" 值的 background-clip 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example1 {
border: 5px dashed #666;
padding: 15px;
background: #1c87c9;
background-clip: border-box;
}
#example2 {
border: 5px dashed #666;
padding: 15px;
background: #1c87c9;
background-clip: padding-box;
}
</style>
</head>
<body>
<h2>Background-clip 属性示例</h2>
<p>这里background-clip 被设置为 "border-box" (默认值).</p>
<div id="example1">
<p>背景延伸到边界后面。</p>
</div>
<p>这里background-clip 被设置为 "padding-box".</p>
<div id="example2">
<p>背景延伸到边框的内边缘。</p>
</div>
</body>
</html>
在这个例子中，背景是在前景文本中绘制的。
具有 "text" 值的 background-clip 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example {
border: 3px dashed #1ebf42;
padding: 15px;
background: #1c87c9;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<h2>Background-clip 属性示例</h2>
<p>这里 background-clip 被设置为"text"</p>
<div id="example">
<p>背景绘制在前景文本中。</p>
</div>
</body>
</html>
CSS background-clip 属性值说明
| 值 | 说明 |
|---|---|
| border-box | 背景出现在边界后面。这是默认值。 |
| padding-box | 背景显示在边框内部。 |
| content-box | 背景延伸到内容框的边缘。 |
| text | 背景绘制在前景文本中。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
日期：2020-06-02 22:14:15 来源：oir作者：oir