CSS mask-composite 语法
在 CSS 中，mask-composite 属性用于定义多个蒙版图像之间的合成模式，也就是决定每一层蒙版如何与下方图层合成，从而实现相加、交集、相减或排除等遮罩混合效果。
语法：
mask-image: url(mask1.png), url(mask2.png), url(mask3.png);
mask-composite: add, subtract;说明：
第一个 mask-image 图层不参与合成运算（因为它没有下方层）。mask-composite 的第 1 个操作作用于第 2 层，依此类推。
其中，mask-composite 属性取值可以是以下 4 种情况。
add（默认值）：当前蒙版层的可见区域将 “添加” 到已有的遮罩区域中，类似图层叠加。subtract：从下方蒙版层（或内容）中 “减去” 当前蒙版层（打孔效果）。intersect：显示当前蒙版层与已有遮罩的重叠区域，两者必须都可见时才保留显示内容。exclude：显示两个蒙版层的非重叠区域（异或逻辑），重叠部分将被遮挡。
当 mask-image 属性中定义了多个蒙版图像时，mask-composite 属性也应提供对应数量的合成操作值，用逗号分隔。注意，mask-composite 的值数量应比 mask-image 的值数量少一个，因为第一个蒙版层不需要与任何前一层进行合成。
mask-image: url("test1.png"), url("test2.png"), url("test3.png");
mask-composite: add, subtract; /* test1 与 test2 add，test3 从 (test1 + test2) 中 subtract */注意:
- mask-composite 属性适用于所有元素。
- 浏览器对 mask-composite 的支持可能存在差异，特别是对于 subtract、intersect 和 exclude 等复杂模式。建议查阅下方最新的 MDN 文档获取详细兼容性信息。
- 为了更好的浏览器兼容性，建议在使用时添加浏览器前缀（如 -webkit-mask-composite），尤其是在旧版浏览器中。
CSS mask-composite 摘要
| 属于 | CSS 蒙版属性 |
|---|---|
| 使用频率 | 低 |
| 是否继承 | 否 |
| 默认值 | add |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS mask-composite 示例
接下来，我们通过一个简单的例子来讲解一下 CSS mask-composite 属性是如何使用的。
示例：mask-composite 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
display: inline-block;
border: 1px dashed gray;
margin: 20px auto;
}
.box {
display: inline-block;
width: 300px;
height: 200px;
border: 2px dashed gray;
line-height: 200px;
text-align: center;
font-size: 1.5em;
color: red;
background-image: url("https://fastly.picsum.photos/id/505/350/200.jpg?hmac=XgPjY6JzFoXbpIrT5Ks-yLPiPH0yNCLTtR14oYrhe60"); /* 随机图片 */
background-size: cover;
/* 定义两个蒙版图像：一个圆形，一个方形 */
mask-image:
radial-gradient(circle at 30% 50%, black 50%, transparent 50%), /* 左侧圆形蒙版 */
linear-gradient(to right, transparent, black); /* 右侧渐变蒙版 */
mask-repeat: no-repeat, no-repeat;
mask-size: 150px 150px, 100% 100%; /* 圆形蒙版尺寸，渐变蒙版覆盖整个元素 */
mask-position: left center, 0 0; /* 圆形在左侧居中，渐变从左上角开始 */
mask-composite: add;
}
</style>
</head>
<body>
<div class="container">
<div class="box">绿叶网</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在上面例子中，我们使用 mask-image 定义了 1 个蒙版层：一个左侧的圆形渐变（透明边缘，黑色中心），一个从左到右的线性渐变（透明到黑）。
由于 mask-composite 设置为 add，这两个蒙版层的不透明区域会叠加。如果改为 mask-composite: subtract;，此时页面效果如下图所示。
如果改为 mask-composite: intersect;，此时页面效果如下图所示。
如果改为 mask-composite: exclude;，此时页面效果如下图所示。
mask 是一个复合属性
在 CSS 中，mask 是一个复合属性，它包含很多子属性（如下表所示）。
| 子属性 | 说明 |
|---|---|
| mask-image | 指定用作蒙版的图像 |
| mask-mode | 定义蒙版图像的渲染模式 |
| mask-repeat | 定义蒙版图像的重复方式 |
| mask-position | 定义蒙版图像的起始位置 |
| mask-size | 定义蒙版图像的尺寸大小 |
| mask-origin | 定义蒙版图像的定位原点 |
| mask-clip | 定义蒙版图像的裁剪区域 |
| mask-composite | 定义多个蒙版图像之间的合成模式 |
