Firefox不支持标准mask-composite，仅部分支持-webkit-mask-composite且需配合-webkit-mask使用；根源是该属性属CSS Masking Level 2，尚未进入稳定实现，推荐用SVG <mask>全平台兼容。
Firefox 里 mask-composite 不生效的根源
Firefox 目前（截至 2026 年 4 月）**不支持标准语法的 mask-composite**，只认 -webkit-mask-composite，且仅在启用 -webkit-mask 的前提下才部分可用。这不是 Bug，而是规范落地节奏问题：Firefox 对 CSS Masking Level 1 的实现仍集中在 mask-image 和基础 mask-mode，mask-composite 被推迟到 Level 2，尚未进入稳定通道。
常见错误现象包括：
-
mask-composite: exclude在 Firefox 中完全被忽略，多层遮罩退化为叠加（等效于add） - 即使加了
-webkit-mask-composite: xor，若未同步声明-webkit-mask，也无效果 - 使用 SVG
<mask>内部定义的mask-composite（如mask-composite="exclude"）在 Firefox 中同样不解析
用 -webkit-mask-composite + 多层 -webkit-mask 实现兼容写法
必须同时提供 -webkit- 前缀版本，并确保所有 mask 层都走同一前缀路径。不能混用标准属性和 WebKit 属性，否则浏览器会丢弃整条声明。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个
mask-image必须对应一个-webkit-mask-image，且顺序严格一致 -
-webkit-mask-composite值的数量要与-webkit-mask-image数量对齐；不足时会循环，但建议显式写全 - Firefox 120+ 支持
-webkit-mask-composite: xor和subtract，但exclude仍不可靠，优先用subtract模拟“镂空”
示例（两个渐变层做交集减法）：
.masked {
-webkit-mask-image:
linear-gradient(black, black),
radial-gradient(transparent 50%, black 50%);
mask-image:
linear-gradient(black, black),
radial-gradient(transparent 50%, black 50%);
<p>-webkit-mask-composite: subtract;
mask-composite: subtract;</p><p>/<em> 必须同步设置其他 mask 子属性 </em>/
-webkit-mask-repeat: no-repeat, no-repeat;
mask-repeat: no-repeat, no-repeat;
}当 mask-composite 彻底不可用时，用 SVG <mask> 替代
SVG 内联 <mask> 是目前唯一能在 Chrome、Safari、Firefox 全平台稳定实现布尔合成的方式，因为它的合成逻辑由 SVG 渲染引擎控制，不依赖 CSS Masking Level 2。
关键点：
- 把多个
<rect>、<circle>或<path>放进同一个<mask>，通过fill颜色（black显，white隐）和opacity控制叠加关系 - 用
<use>引用已有图形可复用形状，避免重复定义 - SVG
<mask>默认行为是“相加”，要实现subtract效果，把底层设为black，上层“镂空区”设为white并opacity: 0（或直接用fill="white"+mask的 alpha 通道逻辑）
最小可行 SVG 遮罩（圆形挖空矩形）：
<svg width="0" height="0">
<defs>
<mask id="hole">
<rect width="100%" height="100%" fill="black"/>
<circle cx="50%" cy="50%" r="40px" fill="white"/>
</mask>
</defs>
</svg>
<p>.element {
mask: url(#hole);
-webkit-mask: url(#hole);
}LightningCSS 能否自动处理 mask-composite 兼容性？
不能。LightningCSS 当前（v5.8）仅能自动添加 -webkit-mask 前缀，但对 mask-composite **不做任何转换或降级**——它既不补 -webkit-mask-composite，也不警告缺失，更不会 fallback 到 SVG。
所以你必须手动处理：
- 构建前检查所有
mask-composite是否配对了-webkit-版本 - 在 LightningCSS 的
targets配置中明确排除 Firefox - 不要依赖
minify: true来“修复”合成逻辑，压缩不会改变语义
真正容易被忽略的是：Firefox 下即使启用了 layout.css.masking.enabled（默认开启），mask-composite 依然无效。这不是配置问题，是引擎能力缺口。别浪费时间调 flags。
