chrome中mask-image需同时声明标准属性和-webkit-mask-image，且顺序必须为先标准后前缀；渐变遮罩禁用transparent，应使用#fff/#000；三浏览器解析逻辑不同，chrome/safari按亮度、firefox依赖alpha或data url。
Chrome 里 mask-image 不显示，不是你写错了，而是它根本没被解析——必须加 -webkit-mask-image 才能生效。
Chrome 必须同时声明 mask-image 和 -webkit-mask-image
Chrome（含新版 Edge）至今未将 mask-image 视为稳定无前缀特性。只写 mask-image: linear-gradient(...)，浏览器会直接跳过；只写 -webkit-mask-image，Firefox 又完全无视。两者缺一不可，且顺序不能错：
- ✅ 正确写法：先标准属性，后 WebKit 前缀
mask-image: linear-gradient(to right, #fff, #000);-webkit-mask-image: linear-gradient(to right, #fff, #000);- ❌ 错误写法：前缀在前，标准在后 → Safari 某些版本（如 iOS 15.6）会级联失效
mask-image 渐变不生效？别用 transparent 或 rgba()
写 mask-image: linear-gradient(to bottom, black, transparent) 却没淡出效果，是因为 transparent 在默认的 luminance 模式下等价于纯黑（亮度为 0），整条渐变变成「黑→黑」，结果全遮盖。
- 一律用明确色值：
#fff表示完全显示，#000表示完全隐藏 - 避免
transparent、rgba(0,0,0,0)等语义模糊值——它们在 luminance 模式下不等于“透明”，而是“黑” - 真要依赖 alpha 通道？得配
mask-mode: alpha，但注意此时linear-gradient(black, transparent)依然无效，必须改用rgba(0,0,0,1)→rgba(0,0,0,0)
Firefox 和 Safari 对遮罩图的处理逻辑完全不同
同一张 PNG 遮罩图，在 Chrome 加了前缀能显示，在 Firefox 却全黑，在 Safari 可能闪烁或不渲染——不是图片坏了，是三者默认解析方式不一致：
- Chrome/Safari 默认按
luminance（亮度）解析：纯白=显示，纯黑=隐藏，灰度=半透；PNG 的 alpha 通道被忽略 - Firefox 虽支持
mask-image，但对url("mask.svg")有静默限制：必须用 data URL 或内联<mask></mask>，否则直接不加载 - Safari ≤15.5 对
linear-gradient()作为-webkit-mask-image支持极不稳定，部分版本只认url()或单色值 - 稳妥做法：把渐变转成 SVG data URL，例如
url("data:image/svg+xml,%3Csvg...%3E")，兼容性最广
最容易被忽略的一点：遮罩图本身不是“透明即显示”，而是“亮度决定可见度”。哪怕你用了带 alpha 的 PNG，只要没关掉透明背景、没填白底黑形，Chrome 就当它是一张全黑图——连报错都没有，就静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
