mask-composite在各浏览器表现不一，根本原因是css masking level 2实现进度不同：chrome/edge原生稳定支持add/subtract/intersect/exclude；firefox需手动启用layout.css.masking.enabled且exclude/intersect不稳定；safari仅支持-webkit-mask-composite且exclude静默失效，全平台可靠方案是svg内联。
mask-composite 在各内核表现不一，根本原因不是“写法错”，而是浏览器对 CSS Masking Level 2 的实现进度和默认策略不同：Chrome/Edge 默认启用并稳定支持全部四个值，Firefox 长期禁用该特性（需手动开启 layout.css.masking.enabled），Safari 则只认 -webkit-mask-composite 且部分值（如 exclude）静默失效。
为什么 Firefox 中 mask-composite 直接被忽略
Firefox 120+ 虽已进入 Level 2 支持阶段，但 mask-composite 仍默认关闭。开发者工具里看到属性标为 “invalid” 或 computed 值为空，不是语法错误，而是该功能未激活。
- 必须在
about:config中手动启用layout.css.masking.enabled（设为true） - 即使启用，
subtract和add可用，intersect和exclude仍有渲染不稳定问题 - 唯一全平台稳定的路径是：
mask: url(#svg-mask)+ SVG 内联<mask></mask>，它绕过 CSS 合成逻辑，由 SVG 渲染引擎统一处理
mask-composite: exclude 与 -webkit-mask-composite: xor 不等价
Chrome/Safari 把 xor 当作 exclude 的别名，但规范中二者语义不同：exclude 是标准布尔异或（A ⊕ B），而 xor 是 WebKit 旧实现的近似行为，仅在双层遮罩时结果一致；三层及以上会出错。
- 不要混用
mask-composite: exclude和-webkit-mask-composite: xor—— Safari 忽略前者，Chrome 可能降级为add - 若必须用异或效果，优先写
-webkit-mask-composite: exclude（WebKit 115+ 已支持标准值） - Firefox 不识别
xor，写了也无效
多层 mask-image 下，漏掉任意一个子属性就全盘失效
mask-composite 是“合成控制器”，但它本身不提供遮罩内容。一旦 mask-image、mask-position、mask-size 等子属性数量不匹配（比如两层 mask-image 却只写一个 mask-position），浏览器会截断多余层或直接弃用整个 mask 声明。
- 每层
mask-image必须有对应数量的mask-repeat、mask-position、mask-size，用逗号分隔 - 推荐显式设置
mask-origin: content-box，避免border-box下因 padding/border 导致遮罩错位 - 禁止混用
mask-mode: luminance—— 亮度模式下 alpha 合成逻辑不可控，mask-composite失效
Safari 中 mask-composite 生效的最小必要条件
Safari 对前缀和配套声明极其敏感，缺一不可。哪怕只少一行 -webkit-mask-image，整个 -webkit-mask-composite 就会被静默忽略。
- 必须同时声明
-webkit-mask-image和mask-image（即使值相同） -
-webkit-mask-composite必须出现在-webkit-mask-image之后，且不能被其他-webkit-属性隔开 - 避免使用
url()引用无 alpha 通道的 PNG —— Safari 不会从纯色图中“减”出透明区域，只认图像自身透明度
真正跨浏览器可靠的 mask-composite 实践，不是堆砌前缀，而是先确认目标环境是否支持 Level 2，再决定用 CSS 还是退到 SVG <mask></mask>。后者看似重，却是目前唯一不依赖实验性 flag、不随浏览器版本抖动的方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
