mask-composite跨浏览器不兼容：chrome忽略语义仅支持add，firefox不支持标准语法，safari依赖-webkit前缀且行为不一；可靠方案是改用svg mask或降级为单层add合成。
不能靠写一遍 mask-composite 就指望它跨浏览器生效——Firefox 能按规范执行 subtract，Chrome/Edge 目前只认关键词、不执行语义，Safari 则依赖 -webkit-mask-composite 且行为不统一。真要落地，得绕开 CSS 层面的合成逻辑，用 SVG 或降级策略兜底。
mask-composite 在 Chrome 中为什么写了等于没写
Chrome（Blink）引擎至今未实现可配置的遮罩合成模型，mask-composite 声明会被解析但忽略语义，始终按 source-over 或等效 add 渲染。即使 getComputedStyle(el).maskComposite 返回 "subtract"，像素层也无裁切效果。
- DevTools 显示“已应用” ≠ 实际生效，必须用
Rendering面板开启Layer Borders和Paint Flashing观察真实绘制区域 - 多层
mask-image下，Chrome 对intersect、exclude完全无反应，哪怕所有遮罩都是纯黑/透明 PNG - 不要依赖
mask-mode: luminance—— 亮度模式下 alpha 合成不可控，mask-composite必然失效
Firefox 不支持标准 mask-composite 的真实原因
Firefox 当前（2026 年中）仍不识别标准语法的 mask-composite，仅部分支持 -webkit-mask-composite，且必须配合 -webkit-mask 系列属性才触发。这不是 bug，而是 CSS Masking Level 2 规范尚未进入稳定实现通道。
-
mask-composite: exclude在 Firefox 中静默丢弃，不会报错也不会 fallback - 即使写了
-webkit-mask-composite: xor，若没同步声明-webkit-mask-image，整个遮罩声明会被浏览器跳过 - Firefox 120+ 开始支持
-webkit-mask-composite: subtract，但exclude仍不可靠；优先用subtract模拟镂空
真正全平台兼容的写法只有两种
一种是彻底放弃 CSS 多层合成，改用 SVG 内联 <mask></mask>；另一种是只用 add（或省略），并确保设计不依赖布尔运算语义。
- SVG 方案：把遮罩逻辑写进
<svg><defs><mask id="m"><rect></rect><circle mask-composite="subtract"></circle></mask></defs></svg>，再通过mask: url(#m)引用 —— 所有浏览器都走 SVG 渲染引擎，行为一致 - CSS 降级方案：只设单层
mask-image，或明确接受多层叠加效果（即默认add），避免写subtract/intersect等语义值 - 若必须用 CSS 多层，
-webkit-mask-composite和mask-composite必须成对出现，且所有子属性（mask-position、mask-size等）数量严格匹配，否则整条声明被截断
容易被忽略的细节：mask-origin 和 mask-repeat 必须显式对齐
mask-origin 默认是 border-box，但容器若有 padding 或 border，遮罩会错位；mask-repeat 若漏写或数量不匹配，浏览器直接弃用整个 mask 声明。
- 强制设
mask-origin: content-box，避免因 box model 变动导致遮罩偏移 - 每层
mask-image必须对应一个mask-repeat、一个mask-position、一个mask-size，全部用逗号分隔，缺一不可 - URL 类型遮罩图（如
mask-image: url(logo.svg)）必须自身含 alpha 通道，纯白 PNG 即使设subtract也挖不出洞
最麻烦的不是写不对，而是写对了却看不出错——因为浏览器不报错、不警告，只是默默按自己逻辑渲染。验证是否真生效，唯一可靠方式是用 canvas 绘制相同布尔逻辑作像素比对，而不是凭肉眼判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
