结论：mask-image: linear-gradient()最简洁但兼容性差；safari要求纯灰度（#000/#fff），firefox不支持渐变，chrome/edge需-webkit前缀；svg遮罩是全兼容方案。
直接说结论：用 mask-image: linear-gradient() 是最简洁的方式，但必须处理好浏览器对灰度值的解析差异——Safari 要纯灰阶（#000/#fff），Firefox 当前仍不支持渐变值，Chrome/Edge 需加 -webkit-mask-image 前缀才能稳定生效。
为什么 mask-image: linear-gradient(to bottom, transparent, black) 在 Safari 里失效
Safari 把 transparent 当作无效色值，自动降级为全透明遮罩层，结果整个元素“全显”；它只认灰度明确的值：#000（100% 显示）、#808080（50% 透明）、#fff（0% 显示）。rgba(0,0,0,0) 或 transparent 都会被忽略或转义。
- 正确写法（Safari 友好）：
mask-image: linear-gradient(to bottom, #000, #fff); - 错误写法（Safari 中退化）：
mask-image: linear-gradient(to bottom, transparent, black); - 若需控制透明比例，用十六进制灰阶：比如
#000→#666→#fff，而非依赖 alpha 通道
Firefox 下 mask-image 渐变完全不生效怎么办
截至 2026 年中，Firefox 仍不解析 mask-image 的 linear-gradient() 值，声明会被静默丢弃，等同于没写。这不是语法错误，而是功能缺失。
- 必须提供降级方案：用
mask-image: url(#svg-mask)引用内联 SVG<mask></mask>，这是目前唯一全浏览器兼容的渐变遮罩方式 - 不要依赖
@supports (mask-image: linear-gradient())检测，Firefox 会返回true但实际不执行 - 开发时务必在 Firefox 中打开 DevTools → “Computed” 面板，确认
mask-image是否被标记为 “invalid” 或 “not applied”
Chrome/Edge 必须加 -webkit-mask-image 才能渲染？
是的。新版 Chrome（120+）和 Edge（120+）虽已支持标准 mask-image，但部分渐变组合（尤其是含 transparent 或多色 stop）仍需 -webkit-mask-image 触发渲染管线。
- 稳妥写法必须双写：
-webkit-mask-image: linear-gradient(...); mask-image: linear-gradient(...); -
mask-size和mask-repeat也建议加前缀，避免 Safari/旧 Chrome 错位 - 注意：
mask简写属性（如mask: linear-gradient(...) 100% / cover;）在 Safari 中可能被整体忽略，优先拆解为独立属性
想让盒子顶部/底部/左右边缘渐变透明，参数怎么配
方向与颜色停止点要严格对应“遮罩亮区 = 内容可见区”。例如顶部渐变透明，就是让顶部遮罩由黑（显示）过渡到白（隐藏），内容才看起来“从顶部淡出”。
- 顶部渐变透明（内容从上往下消失）：
mask-image: linear-gradient(to bottom, #000 0%, #fff 30%); - 底部渐变透明（内容从下往上消失）：
mask-image: linear-gradient(to top, #000 0%, #fff 30%); - 左右两侧渐变透明（中间清晰、两边淡出）：
mask-image: linear-gradient(to right, #000 20%, #fff 40%, #fff 60%, #000 80%); - 所有场景都建议加
mask-size: 100% 100%; mask-repeat: no-repeat;，否则默认平铺会重复遮罩
真正麻烦的不是写法，而是每个浏览器对“什么是有效遮罩色”的定义不同——Safari 认灰度，Firefox 不认渐变，Chrome 要前缀。别试图用一套 CSS 覆盖全部，先定主目标浏览器，再用 SVG <mask></mask> 补漏，比硬调渐变值更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
