mask-image 不能直接作用于 元素，因其盒模型受表格渲染流限制、firefox 解析不稳定、safari 忽略 mask-position 偏移；须用 ::before 伪元素绝对定位层叠于文字下方，设 mask-origin: content-box、z-index: -1、pointer-events: none，并双写 -webkit-mask-image 与 mask-image 以保障兼容性。
mask-image 能让表头背景真正“透底”显示底层图案，不是靠半透明叠加糊弄——但直接套在 <th> 上大概率失效，必须处理盒模型层级和遮罩解析逻辑。
<h3>为什么 <code><th> 直接加 <code>mask-image 没反应
表格单元格默认 box-sizing: border-box 且 background-clip 受限，mask 会作用在整个盒模型（含 padding/border），而表头内容文字又常覆盖遮罩区域。更关键的是：Firefox 对 <th> 的 <code>mask 解析不稳定，Safari 则可能忽略 mask-position 偏移。
- 把
mask移到<th> 的伪元素 <code>::before上，用position: absolute层叠在文字下方 - 确保
<th> 自身 <code>background设为透明或纯色，否则遮罩被背景盖住 - 必须显式设置
mask-origin: content-box，否则遮罩锚点落在 border 区域，图案错位 - 渐变示例（横向条纹镂空）：
mask-image: linear-gradient(90deg, transparent 0%, transparent 45%, black 45%, black 55%, transparent 55%, transparent 100%) - SVG 内联写法注意 URL 编码，
fill="black"是“保留显示区”，不是镂空区；若用灰度图，加mask-mode: luminance防 Firefox 误判 - 别漏
mask-repeat: repeat，否则单个渐变块只铺左上角一格 - 文字用真实颜色（如
color: #333），放在遮罩层上方（z-index > 0） - 遮罩层伪元素设
z-index: -1，并用pointer-events: none避免拦截点击 - 若需镂空文字本身（比如让文字区域透出底层图案），改用
background-clip: text+color: transparent，放弃mask——二者不可混用 - 必须双写：
-webkit-mask-image: ...; mask-image: ... - 避免用
mask-composite: exclude，Safari 不认，改用两层遮罩（一层 content-box + 一层 border-box）模拟 - 测试时重点看 Safari 17.5+ 和 Firefox 128+，Chrome 已基本无坑
mask-image 用渐变还是 SVG？看镂空形状复杂度
简单几何镂空（如条纹、菱形网格）用 linear-gradient 最轻量；需要文字轮廓、不规则缺口或抗锯齿边缘，必须上 SVG。
表头文字不被遮罩吃掉的关键控制
遮罩层和文字必须分层，否则文字会被 mask 当作背景一起裁切。常见错误是把文字设为 color: transparent 还想靠 background-clip: text 显形——这和 mask 冲突，浏览器优先执行 mask。
Safari 和 Firefox 的兼容性补丁不能少
2026 年主流版本中，Safari 仍要求 -webkit-mask-image，且对 mask-composite 完全不支持；Firefox 支持 mask-mode 但会忽略 mask-origin 在表格中的表现。
真正难的不是写对那几行 mask，而是理解它和表格渲染流的对抗关系——<th> 不是普通 div，它的盒模型行为在不同引擎里差异极大，稍不注意就变成“镂空没效果”或“文字全消失”。</th>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
