mask-image 才是实现渐变或图片遮罩的关键属性，mask 仅为简写容器；safari 要求渐变色为纯灰度，firefox 不支持渐变值，chrome/edge 需加 -webkit 前缀；svg 引用是最兼容方案；伪元素 background-gradient 仅模拟视觉效果，不具真实 alpha 裁剪能力。
mask 属性本身不直接支持渐变或图片遮罩——真正起作用的是 mask-image，而 mask 只是它的简写容器（可合并 mask-mode、mask-repeat 等）。现代项目中，用 mask-image 配合 linear-gradient 或 url() 是最可控的方式，但必须正视兼容性断层。
为什么 mask-image: linear-gradient() 在 Safari 和 Firefox 表现不一致
问题不在写法，而在浏览器对“渐变作为遮罩”的解析逻辑不同：
- Safari（15.4+）要求
mask-image的渐变颜色必须是纯灰度：只认#000（全显）、#fff（全隐）、中间灰阶（半透），rgba(0,0,0,0.5)会被当作无效值降级为全透明 - Firefox 目前（2026 年中）仍不支持
mask-image的渐变值，会完全忽略该声明，退回到无遮罩状态 - Chrome/Edge 支持良好，但需加
-webkit-mask-image前缀才能触发渲染（仅限旧版 Blink 内核） - 若你写了
mask-image: linear-gradient(to bottom, black, transparent)，在 Firefox 中等同于没写；在 Safari 中，transparent被转成#000，导致整个遮罩失效（全显）
用 url(#id) 引用 SVG 是最稳的渐变遮罩方案
绕过 CSS 渐变解析分歧的唯一可靠路径，是把渐变定义在 SVG 的 <mask></mask> 里，再用 CSS 或 SVG 属性引用它。这种方式所有现代浏览器（Chrome/Firefox/Safari/Edge）都稳定支持，且 alpha 控制精准：
-
<mask></mask>必须放在<svg></svg>的<defs></defs>中，<svg></svg>可设width="0" height="0"隐藏 - 渐变必须用
<lineargradient></lineargradient>或<radialgradient></radialgradient>，stop-color只能是十六进制（如#000、#fff），不能用rgba()或命名色 - 遮罩生效靠亮度（luminance）：白色区域 = 元素对应位置 100% 显示，黑色 = 0% 显示，灰色 = 按灰度比例显示
- 应用时，对 HTML 元素写
-webkit-mask: url(#fadeMask); mask: url(#fadeMask);；对 SVG 元素写mask="url(#fadeMask)"
伪元素叠加 background-gradient 不是 mask，但更实用
如果你只是想实现“视觉上像遮罩”的效果（比如图片上叠一层从黑到透明的渐变以突出文字），::before + background: linear-gradient() 是更轻量、兼容性更好、调试更直观的选择：
- 它不改变元素真实透明度，只是加了一层覆盖层，所以不存在浏览器解析差异
-
rgba()完全可用，0.7、0.2都能实时生效，支持响应式缩放和 hover 动画 - 必须确保容器有
position: relative，伪元素设content: ""+position: absolute+top/left/right/bottom: 0 - 注意：如果目标元素需要被点击或聚焦（如按钮内图片），要加
pointer-events: none到伪元素，否则会拦截事件
别混淆 mask-image 和 background-image 的叠加顺序
这是最容易出错的点：有人试图用 background: linear-gradient(), url(...) 实现遮罩，结果发现渐变“盖不住”图片——因为 background 是从后往前绘制，图片层在渐变层下面，相当于把渐变当背景、图片当前景，根本不是遮罩逻辑：
- 正确做法是：渐变必须作为遮罩层（
mask-image或 SVG<mask></mask>），作用于整个元素的最终渲染输出 -
background多层叠加只能模拟视觉效果，无法实现真正的 alpha 通道裁剪（比如让文字边缘羽化、让边框按圆角精确裁切） - 真正需要 alpha 级控制的场景（如圆角渐变边框、中心模糊聚焦、非矩形头像裁剪），必须走
mask-image或 SVG<mask></mask>路径
复杂点在于：你得先判断需求本质——是要“看起来像”，还是“必须按 alpha 裁剪”。前者用伪元素省事；后者绕不开 SVG <mask></mask>，而且得手动处理灰度映射和坐标单位（maskUnits="userSpaceOnUse" vs "objectBoundingBox"）。没人会告诉你，调试时把 mask 临时换成 background: red 查形状，比对着规范猜 offset 更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
