CSS background-clip 语法
在 CSS 中，background-clip 属性用于定义背景（包括背景颜色、背景图片）的裁剪区域。
语法：
background-clip: 关键字;说明：
background-clip 的取值有 3 种，如下表所示。
| 取值 | 说明 |
|---|---|
| border-box（默认值） | 从边框开启裁剪 |
| padding-box | 从内边距开始裁剪 |
| content-box | 从内容区开始裁剪 |
边框、内边距、内容区都是盒子模型的概念，如下图所示。
background-clip 还有一种特殊取值 “text”，此时背景被裁剪到前景文本的形状。这需要浏览器支持，并且通常需要配合 color: transparent; 或其他方式使文本本身透明，才能看到背景。
注意: background-clip 属性只有用于具有背景的元素才会生效，即设置了 background-image 或 background-color 的元素。
CSS background-clip 摘要
| 属于 | CSS 背景 |
|---|---|
| 使用频率 | 中 |
| 是否继承 | 否 |
| 默认值 | border-box |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS background-clip 示例
接下来，我们通过几个简单的例子来讲解一下 CSS background-clip 属性是如何使用的。
示例 1：background-clip 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 150px;
height: 150px;
padding: 20px;
border: 20px dashed red;
background-color: skyblue;
background-clip: border-box;
}
</style>
</head>
<body>
<div>绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网</div>
</body>
</html>页面效果如下图所示。
分析：
如果使用的是 background-clip: padding-box;，此时页面效果如下图所示。
如果使用的是 background-clip: content-box;，此时页面效果如下图所示。
示例 2：background-clip 实现渐变文字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
display: inline-block;
font-size: 30px;
font-weight: bold;
color: transparent; /* 使文字颜色透明 */
background-image: linear-gradient(to right, red, orange, yellow, green); /* 设置渐变背景 */
-webkit-background-clip: text; /* 将背景裁剪到文本 */
background-clip: text; /* 标准属性 */
-webkit-text-fill-color: transparent; /* WebKit 浏览器文字填充色透明 */
}
</style>
</head>
<body>
<div>绿叶网 - 为好教程，全力以赴。</div>
</body>
</html>页面效果如下图所示。
分析：
这个例子实现了渐变文字的效果。首先我们需要使用 color: transparent; 将文字颜色设置为透明（这样才会显示出背景），并使用 background-image 属性设置了一个线性渐变。
然后将 background-clip 设置为 text，这样背景渐变就会被裁剪到文本的形状，并填充为文字形状。注意，为了更好的兼容性，这里同时使用了 -webkit-background-clip 和 -webkit-text-fill-color。
提示: 可能小伙伴们也发现了，绿叶网有不少渐变文字，其实这也是使用 background-clip 属性来实现的。
