<p>mask-composite 支持 add、subtract、intersect、exclude 四种合成模式，分别对应并集、裁切、交集和异或运算；仅多层 mask-image 下生效，Chrome/Edge 111+、Firefox 125+ 原生支持，Safari 需 -webkit- 前缀且兼容性有限。</p>
mask-composite 支持哪些合成模式
mask-composite 用于控制多个 mask-image（用逗号分隔）之间的 alpha 通道如何运算，它不是“叠加颜色”，而是对遮罩的透明区域做布尔逻辑处理。目前稳定支持的值只有四个：add、subtract、intersect、exclude。
其中 add 是默认行为（不写也生效），相当于“取并集”：所有遮罩层的不透明区域都保留显示；subtract 是最常用的手动裁切方式，即“用第二层遮掉第一层”；intersect 只保留重叠部分；exclude 则是“异或”，重叠区域反向隐藏。
- 浏览器兼容性上，Chrome / Edge 111+、Firefox 125+ 原生支持，Safari 目前仍需
-webkit-mask-composite且仅部分支持（如subtract可用，exclude无效） - 必须配合多层
mask-image使用，单层时该属性无意义 - 不能和
mask-mode: luminance混用——亮度模式下合成逻辑不可控，容易失效
为什么写了 mask-composite 却没效果
常见原因是漏掉了配套的 mask 子属性声明，导致浏览器降级为单层遮罩或直接忽略合成逻辑。
- 每层
mask-image必须有对应数量的mask-repeat、mask-position、mask-size值（用逗号分隔），否则浏览器会截断或报错 - Safari 要求显式写
-webkit-mask-composite，且必须和-webkit-mask-image同时存在，否则静默忽略 - 如果用了
url()遮罩图但图片本身不含 alpha 通道（比如纯白 PNG），那无论怎么设subtract都不会“减”出洞——遮罩依赖的是图像自身的透明度，不是颜色值 -
mask-origin默认是border-box，若容器有 padding/border，遮罩可能错位，建议统一设为content-box
用 subtract 实现「镂空文字」的最小可行代码
这是最典型的 mask-composite: subtract 场景：先铺一层实色遮罩（如渐变），再用文字 SVG 或文本遮罩“挖空”中间区域。
立即学习“前端免费学习笔记（深入）”；
div.text-cutout {
background: linear-gradient(45deg, #3498db, #e74c3c);
-webkit-mask-image:
linear-gradient(#000 0 0),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='100'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dominant-baseline='middle' font-size='48' fill='%23000'%3EHELLO%3C/text%3E%3C/svg%3E");
mask-image:
linear-gradient(#000 0 0),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='100'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dominant-baseline='middle' font-size='48' fill='%23000'%3EHELLO%3C/text%3E%3C/svg%3E");
-webkit-mask-composite: subtract;
mask-composite: subtract;
-webkit-mask-repeat: no-repeat, no-repeat;
mask-repeat: no-repeat, no-repeat;
-webkit-mask-position: center, center;
mask-position: center, center;
}
注意：SVG 中文字 fill="#000" 是关键——黑色代表“显示”，透明背景才是“挖空”区域；如果填了 white，在 Safari 下可能完全不显示。
exclude 和 intersect 在实际布局中难落地的原因
exclude 和 intersect 理论上能实现更精细的图形交集控制，但实际项目里极少能稳定复现预期效果。
- Firefox 对
exclude的实现会受mask-mode影响，设成alpha才可靠，而 Safari 根本不识别该值 - 当两层遮罩尺寸或位置没对齐时，
intersect容易产出极细的残留边线，尤其在高 DPR 屏幕下表现为 1px 锯齿或闪烁 - 动画中修改
mask-composite值无法触发重绘，必须连带改mask-image或其他 mask 属性才能刷新 - 真正需要布尔交集逻辑的场景，往往更适合用
clip-path+path()或 SVG<clipPath>，可控性更强
多层遮罩的合成逻辑看似灵活，但一旦涉及跨浏览器交付，subtract 就是事实上的兼容底线；其余模式建议只在内部工具或实验页中尝试，别押注上线。
