CSS mask-clip 语法
在 CSS 中，mask-clip 属性用于定义蒙版图像的裁剪区域。它的行为与 background-clip 属性非常相似。
语法：
mask-clip: 关键字;说明：
mask-clip 的取值有 3 种，如下表所示。
| 取值 | 说明 |
|---|---|
| border-box（默认值） | 从边框开启裁剪 |
| padding-box | 从内边距开始裁剪（不包含边框） |
| content-box | 从内容区开始裁剪（不含边框和内边距） |
边框、内边距、内容区都是盒子模型的概念，如下图所示。
当 mask-image 属性中定义了多个蒙版图像时，mask-clip 属性也应提供对应数量的裁剪盒模型值，并用英文逗号分隔，这些值会按顺序应用于各个蒙版层。
mask-image: url("test1.png"), url("test2.png");
mask-clip: border-box, content-box; /* test1.png 裁剪到边框盒，test2.png 裁剪到内容盒 */对于 mask-clip 属性，小伙伴们还需要清楚以下几点。
- mask-clip 属性适用于所有元素。
- mask-origin 属性定义了蒙版图像的定位原点，而 mask-clip 定义了蒙版图像的裁剪区域。这两个属性虽然相似，但功能不同，可以独立设置。
- mask-clip 对性能影响比 clip-path 和 filter 更小，适合复杂界面中的层叠遮罩效果。
注意: mask-clip: text 属性目前在 Firefox 中需要使用 mask-type: alpha，而在 Safari 中则需要使用 -webkit-background-clip: text 和 -webkit-text-fill-color: transparent 配合使用才能达到类似效果。建议查阅下方最新的 MDN 文档来获取详细兼容性信息。
CSS mask-clip 摘要
| 属于 | CSS 蒙版属性 |
|---|---|
| 使用频率 | 中 |
| 是否继承 | 否 |
| 默认值 | border-box |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS mask-clip 示例
接下来，我们通过一个简单的例子来讲解一下 CSS mask-clip 属性是如何使用的。
示例：mask-clip 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
display: inline-block;
margin: 20px;
border: 1px dashed gray;
}
.box {
display: inline-block;
width: 200px;
height: 200px;
padding: 30px;
border: 30px solid red;
/* 定义背景图片 */
background-image: url("imgs/bird.jpg");
background-size: cover;
/* 定义蒙版图片 */
mask-image: url("imgs/star.svg");
mask-repeat: no-repeat;
mask-size: 100%;
mask-clip: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>页面效果如下图所示。
分析：
mask-clip: border-box; 表示从边框开始裁剪。如果改为 mask-clip: padding-box;，此时页面效果如下图所示。
如果改为 mask-clip: content-box;，此时页面效果如下图所示。
mask 是一个复合属性
在 CSS 中，mask 是一个复合属性，它包含很多子属性（如下表所示）。
| 子属性 | 说明 |
|---|---|
| mask-image | 指定用作蒙版的图像 |
| mask-mode | 定义蒙版图像的渲染模式 |
| mask-repeat | 定义蒙版图像的重复方式 |
| mask-position | 定义蒙版图像的起始位置 |
| mask-size | 定义蒙版图像的尺寸大小 |
| mask-origin | 定义蒙版图像的定位原点 |
| mask-clip | 定义蒙版图像的裁剪区域 |
| mask-composite | 定义多个蒙版图像之间的合成模式 |
