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></mask> 是最稳方案
绕过 CSS 渐变解析分歧的唯一可靠路径，是把渐变定义在 SVG 的 <mask></mask> 里，再用 CSS 引用它：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<svg></svg>必须内联在 HTML 中（不能外部引用），且建议设width="0" height="0"隐藏，不影响布局 -
<mask></mask>必须放在<defs></defs>内，否则无法被引用 - 渐变只能用
<lineargradient></lineargradient>或<radialgradient></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 裁掉了遮罩区域。先查这两点，比反复调渐变参数更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
