mask-image是关键属性，mask仅为简写；Safari要求渐变色为纯灰度（#000/#fff），transparent在Safari中被转为#000致全显，Firefox忽略渐变声明，Chrome/Edge需-webkit-mask-image前缀才生效。
mask-image 才是关键，mask 只是简写容器；渐变写法在 Safari、Firefox、Chrome/Edge 之间不兼容，直接用会导致遮罩失效或全显/全隐。
为什么 mask-image: linear-gradient() 在不同浏览器表现不一致
不是语法错，是浏览器对“渐变作为遮罩”的解析逻辑根本不同：
- Safari（15.4+）要求渐变颜色必须是纯灰度：只认
#000（显示）、#fff（隐藏）、中间灰阶（半透），transparent或rgba(0,0,0,0.5)会被当作无效值，降级为全透明 - Firefox（2026 年中）仍不支持
mask-image的渐变值，整条声明被忽略，等同于没写 - Chrome/Edge 支持良好，但必须加
-webkit-mask-image前缀才触发渲染；只写标准属性会静默失效
典型错误写法：mask-image: linear-gradient(to bottom, black, transparent) —— 在 Firefox 中无效果，在 Safari 中 transparent 被转成 #000，导致整个遮罩变成全显。
用 url(#id) 引用 SVG <mask> 是最稳方案
绕过 CSS 渐变解析分歧的唯一可靠路径，是把渐变定义在 SVG 的 <mask> 里，再用 CSS 引用它：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<svg>必须内联在 HTML 中（不能外部引用），且建议设width="0" height="0"隐藏，不影响布局 -
<mask>必须放在<defs>内，否则无法被引用 - 渐变只能用
<linearGradient>或<radialGradient>，stop-color只能是十六进制（如#000、#fff），禁用rgba()和命名色 - 遮罩生效靠亮度（luminance）：白色 = 100% 显示，黑色 = 0% 显示，灰色 = 按灰度比例显示
HTML 元素应用方式：-webkit-mask: url(#fadeMask); mask: url(#fadeMask);；注意目标元素必须有明确宽高（如 width: 300px; height: 200px;），否则坐标系失准。
::before + background: linear-gradient() 不是真遮罩，但更实用
如果你只是想实现“视觉上像遮罩”的效果（比如图片上叠一层从黑到透明的渐变以突出文字），伪元素叠加是更轻量、兼容性更好、调试更直观的选择：
- 它不改变元素真实透明度，只是加了一层覆盖层，所以不存在浏览器解析差异
-
rgba()完全可用，0.7、0.2都能实时生效 - 容器需设
position: relative，伪元素设content: ""+position: absolute+top: 0; left: 0; width: 100%; height: 100% - 响应式图片下，必须确保容器尺寸稳定，否则伪元素可能拉伸错位
这种方案本质是“盖层”，不是“挖洞”——它不能做出镂空文字、Alpha 裁剪等真实遮罩能力，但对绝大多数视觉需求已足够。
真正容易被忽略的是：遮罩是否生效，90% 不是代码写错，而是目标元素没有明确背景（background-color 或 background-image），或父容器 overflow: hidden 裁掉了遮罩区域。先查这两点，比反复调渐变参数更有效。
