safari 中 mask-image 渐变淡出失效，因仅支持 luminance 模式下 #000（全显）到 #fff（全隐）的灰度渐变；需同时声明 -webkit-mask-image、mask-position 和 mask-size，并用内联 svg 方案兼容 firefox。
mask-image 渐变淡出为什么在 Safari 里完全没反应
写了 mask-image: linear-gradient(to bottom, #000, transparent) 却看不到淡出，大概率是 Safari 静默把 transparent 当成 #000 处理了——结果整张图全显，毫无过渡。它不报错、不警告，只默默失效。
根本原因是 Safari（15.4+）只认 luminance 模式下的纯灰度值：#000 表示完全可见，#fff 表示完全隐藏，中间灰阶（如 #808080）才控制半透强度。别用 black/white 别名，Safari 解析不稳定；也别碰 rgba() 或 hsla()，它们会被忽略或转黑。
-
mask-image: linear-gradient(to bottom, #000, #fff)是 Safari 下唯一可靠的渐变淡出写法 - 必须同时声明
-webkit-mask-image，否则新版 Safari 直接跳过渲染 - 漏掉
mask-mode: luminance可能导致 Firefox 或旧 Chrome 行为异常（虽然现代 Blink 已默认该值）
Firefox 不支持 mask-image 渐变，只能靠 SVG
截至 2026 年中，Firefox 仍把 mask-image: linear-gradient() 当作无效声明直接忽略——这不是 bug，是未实现特性。你写的那行 CSS，等于没写。
真正跨浏览器稳定的方案是内联 SVG：mask-image: url("data:image/svg+xml;utf8,<svg>...")</svg>。关键细节：
- SVG 中必须用
stop-color="black"和stop-color="white"，不能写fill或省略 - 必须带锚点，比如
#m，否则 Firefox 找不到<mask></mask>元素 - 整个 SVG 要
encodeURIComponent()编码，尤其注意、<code>>、空格和引号 - 推荐用
mask-mode: alpha配合 SVG，比 luminance 更可控（尤其对 PNG 遮罩）
淡出方向不对？不是渐变写错了，是 mask-position 没调
想让图片从右往左“揭开”，只改 linear-gradient(to left, #000, #fff) 没用。因为遮罩默认居中定位，渐变起点永远落在元素中心，动画或过渡永远从中部展开。
要控制淡出起始位置，必须显式设 mask-position：
- 从右往左淡出：
mask-position: right center - 从下往上淡出：
mask-position: center bottom - 配合
mask-size: 100% 100%和mask-repeat: no-repeat，避免缩放错位或平铺
这些属性不写，Chrome/Edge 可能凑合跑，但 Safari 和 Firefox 极易出现边缘撕裂或局部不生效。
元素“消失”了？mask-image 不是 background-image 替代品
最常踩的坑：给一个空 <div> 或没设背景的容器加 <code>mask-image，结果页面上啥也不见——因为 mask-image 只控制 Alpha 通道，它本身不提供颜色或图像。
必须确保被遮罩的元素有可显示的内容：
- 图片：直接用
<img>或设background-image - 文字：先
color: transparent+background-clip: text把文字转为背景，再用 mask 控制其渐隐 - 纯色块：至少设
background-color，否则 mask 后只剩透明区域
另外，mask-image 默认值是 none，它不等于“显示全部”，而是交由父级 overflow 和自身 opacity 决定最终是否可见。
