想用mask-image做文字遮罩，必须同时设置color:transparent、background-clip:text和显式background，否则safari看不见、firefox忽略、chrome显示异常；因mask-image仅作用于背景内容，对纯文字color无效。
直接说结论：想用 mask-image 做文字遮罩，不能只写 mask-image，必须配合 color: transparent + background-clip: text + 显式 background，否则 Safari 看不见、Firefox 直接忽略、Chrome 也只显示一半。
为什么写了 mask-image 文字却没反应？
最常见原因是：文字本身不是“背景”，而 mask-image 默认只作用于 background 和 border 区域，对 color 无效。你写的 mask-image: linear-gradient(to right, black, transparent) 其实一直在“遮背景”，但文字没背景——它就只是透明的空壳。
- 必须先让文字变成“可被遮罩的内容”：用
color: transparent把字变透明，再用background: linear-gradient(...)填充颜色，最后靠background-clip: text把背景“贴”到文字形状上 - 漏掉
background就等于没内容可遮——mask-image会静默失效，不报错也不渲染 - Firefox 至今（2026 年中）仍完全不支持
mask-image的渐变值，整条声明被跳过；Safari 则要求-webkit-mask-image且渐变终点必须是transparent，不能写rgba(0,0,0,0)
mask-image 渐变写法在 Safari 中失效怎么办？
Safari 对 mask-image 的渐变解析极其严格：它不认 rgba() 表示的透明，也不接受未加前缀的标准属性。哪怕你写了 mask-image，只要没配 -webkit-mask-image 或终点用了 rgba，就等于没写。
- 必须同时写两行：
-webkit-mask-image: linear-gradient(to right, black, transparent)和mask-image: linear-gradient(to right, black, transparent) - 渐变终点只能是
transparent字面量——rgba(0,0,0,0)、hsla(0,0%,0%,0)、甚至#0000都会被 Safari 当作不透明黑，导致遮罩全显或反向 - 方向要匹配文字排布：
to right适合横排渐隐，to bottom才能实现竖排淡出（比如侧边导航文字） - 现代 WebKit 支持不套
url()的写法，但加了更稳：-webkit-mask-image: url("data:image/svg+xml,...")或-webkit-mask-image: linear-gradient(...)都可以
想做波浪、镂空、文字轮廓类精细遮罩，还能用渐变吗？
不能。渐变只有软边过渡能力，没有像素级控制力——它画不出锯齿、缺口、字母内孔，也做不到 Safari/Firefox 下一致行为。一旦你需要“文字被波浪形裁切”或“只显示‘MASK’字形内部”，就必须换 SVG。
- SVG 遮罩必须内联（
<svg><defs><mask id="xxx">...</mask></defs></svg>），避免 CORS 和加载失败 - SVG 内
<mask></mask>中：白色（#fff）= 显示，黑色（#000）= 隐藏，灰色 = 半透；别给<mask></mask>设宽高，靠mask-size: 100% 100%适配容器 - 引用时用
mask-image: url(#text-mask)，且务必同时写-webkit-mask-image - 若用外部 PNG，必须同源且 Alpha 通道精准——Safari 对
file://协议下的 PNG mask 有额外限制，开发时建议走本地服务器
mask-size 和 mask-position 怎么配合控制渐隐范围？
mask-image 定义“图案”，mask-size 和 mask-position 才决定这个图案盖在哪儿、盖多大。比如“查看全文…”右端淡出，靠的不是渐变本身长度，而是把一个固定宽度的渐变“框”往右推，露出左侧文字、遮住右侧。
- 设
mask-size: 200px 100%（宽 200px，高满屏），再用mask-position: calc(100% - 200px) center把遮罩右对齐——文字右侧就被渐变“吃掉”了 - 动画时同时动
background-position（让渐变色流动）和mask-position（让遮罩框滑动），才能做出波浪文字那种“表面起伏”的错觉 - 注意：
mask-size设太小会导致锯齿，太大则边缘模糊；建议用px或em而非百分比，避免响应式下失真
真正难的不是写对一行 mask-image，而是记住它从来不是独立生效的属性——它依赖背景存在、受浏览器前缀绑架、被 SVG 引用方式卡住、还要靠 mask-size 和 mask-position 才能“动起来”。漏掉其中任意一环，效果就断在某个浏览器里，还查不出错在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
