mask-image 在 table-cell 上无效，因 display: table-cell 不支持 css masking；必须用嵌套 div 并设 mask-mode: luminance 和 -webkit- 前缀，同时确保尺寸确定、避免性能损耗。
mask-image 在 table-cell 上根本不起作用
直接给 <td> 或 <code><th> 设置 <code>mask-image 几乎总是无效的——因为表格单元格默认是 display: table-cell，而该显示类型不支持 CSS masking（包括 mask-image、mask 等），这是浏览器渲染规范决定的，不是写法或兼容性问题。
常见错误现象：
– 样式写对了，但完全没渐变遮罩效果
– DevTools 里能看到 mask-image 声明，但 computed 面板中该属性值为空或 none
– 换成 div 就立刻生效，一换回 td 就失效
- 必须把内容包裹进一个支持 masking 的元素（如
div、span）中，再对该子元素应用mask-image - 不能依赖
td自身的 display 类型；即使强行设display: block，也会破坏表格布局逻辑（比如自动列宽、垂直对齐等） - 如果需要保持表格语义和结构完整性，mask 必须“透传”到内部容器，而非作用于单元格本身
正确做法：用嵌套 div + mask-image 实现渐隐
核心思路是让单元格只负责布局，把渲染和遮罩交给其子 div。这个 div 需要撑满单元格，并启用 masking。
示例结构：
<td> <div class="fade-out">这是一段可能超长的文字内容</div> </td>
对应样式：
.fade-out {
width: 100%;
height: 100%;
mask-image: linear-gradient(to right, black 80%, transparent 100%);
/* 注意：mask-mode 默认是 alpha，需显式设 luminance 才能响应渐变色 */
mask-mode: luminance;
/* 可选：防止文字被截断时出现锯齿 */
-webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
-webkit-mask-mode: luminance;
}
-
mask-mode: luminance是关键——否则黑→透明的线性渐变会被当成 alpha 通道处理，导致整块消失或无效果 - 务必加
-webkit-前缀，Safari 目前仍不支持无前缀的mask-mode - 不要用
overflow: hidden替代，它无法实现平滑渐隐，且会切断文字基线对齐 - 若单元格有 padding，
.fade-out需配合box-sizing: border-box或调整内边距逻辑
兼容性与 fallback 方案
mask-image 在 Chrome 112+、Edge 112+、Safari 15.4+ 中可用，Firefox 完全不支持（截至 2024 年中仍无计划支持）。
检测与降级建议：
- 用
@supports (mask-image: linear-gradient())包裹渐隐样式，避免干扰老浏览器 - Firefox 用户看到的是完整文本（无遮罩），属于可接受的优雅降级；如需强制截断，可额外加
text-overflow: ellipsis+white-space: nowrap，但仅适用于单行 - 多行渐隐无法靠
mask-image实现（因 mask 是二维图像，不感知行高），此时应改用line-clamp+ 背景渐变遮罩模拟（即用伪元素盖住末尾几行） - 若项目必须全浏览器一致，放弃
mask-image，改用 SVG<mask></mask>贴在绝对定位的div上，但复杂度和维护成本显著上升
容易被忽略的细节：mask 区域尺寸与重绘性能
mask 效果是否生效，不仅取决于元素类型，还高度依赖其渲染区域是否“可绘制”。表格单元格常因 table-layout: auto 导致宽度未定，使内部 div 的 width: 100% 计算为 0px，mask 自然失效。
- 确保父
table或colgroup设有明确列宽（如width: 200px或min-width），否则.fade-out可能压根没尺寸 - 避免在
mask-image中使用大尺寸模糊滤镜（如blur(2px)），这会触发全层重绘，在滚动长表格时明显卡顿 - mask 图像本身尽量用 CSS 渐变（而非 PNG），减少资源加载和内存占用
- 不要给
.fade-out加transform或will-change，mask 已经自带合成层，额外触发反而增加开销
真正起作用的从来不是“给 td 加 mask”，而是让 mask 落在一块有确定尺寸、支持 masking、又不破坏表格流的容器上。漏掉其中任一环，效果就断在半路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
