mask-composite 不适用于 HTML 表格元素，因浏览器引擎不支持对 table、tr、td 等表格盒模型应用多层遮罩合成，且 CSS 规范明确限定其仅适用于块级或内联级元素。
mask-composite 不适用于 HTML 表格元素
直接在 <table>、<tr> 或 <td> 上使用 mask-composite 基本无效——这不是写法问题，而是浏览器根本不支持对表格盒模型（table formatting context）应用多层遮罩合成。所有主流引擎（Blink、WebKit、Gecko）均未实现该能力，CSS Masking Level 1 规范也明确将 mask-composite 的适用范围限定在“可绘制的块级或内联级元素”上，而表格相关元素被排除在外。
为什么 table + mask-composite 会静默失败
常见现象包括：样式声明存在但无任何视觉变化、开发者工具中 mask-image 显示为已解析却无裁切效果、mask-composite: exclude 完全被忽略。根本原因有三：
- 表格单元格（
<td>）默认是display: table-cell，它不参与常规的 painting layer 合成流程，mask 层无法正确绑定到其渲染上下文 -
mask-composite要求多个mask-image值用逗号分隔，但表格元素对逗号分隔的遮罩列表解析直接降级为空值 - 即使强行用
display: block覆盖表格显示模式，也会破坏表格语义和布局逻辑，导致边框坍塌、宽度错乱等连锁问题
替代方案：用伪元素 + background-gradient 模拟组合遮罩
若目标是实现类似“表头渐隐 + 行末镂空文字”的视觉效果，应放弃原生 mask-composite，改用更可控的叠加层方案：
- 给
<th>或<td>添加::before伪元素，设position: absolute覆盖局部区域 - 用
background: linear-gradient(90deg, transparent, rgba(0,0,0,0.7), transparent)实现软边过渡，无需担心 Safari 对灰度的限制 - 若需“文字镂空”效果（如背景图透过文字显示），把文字放在
::after，用background-clip: text+-webkit-background-clip: text配合透明色，而非依赖mask-composite: exclude - 避免在表格上套 SVG
<mask>—— 即使引用成功，SVG 遮罩也无法响应表格自动计算的列宽，容易错位
真需要多层遮罩？重构为 div + CSS Grid
当业务逻辑允许时，最稳妥的做法是放弃 <table> 标签语义，改用 <div role="table"> 结构配合 display: grid：
立即学习“前端免费学习笔记（深入）”；
- 每行用
grid-row控制，每列用grid-column划分，保留可访问性（ARIA roles） - 此时容器是标准块级元素，
mask-image+mask-composite: subtract可正常工作 - 注意：Chrome/Edge 支持
mask-composite，但 Safari 仍只认-webkit-mask-composite: source-out，且仅对两层遮罩有效；Firefox 完全不支持该属性，必须降级为单层mask-image或彻底弃用
表格不是万能容器，遮罩也不是万能裁切工具——真正难的从来不是怎么写，而是判断什么时候不该用。
