mask-image渐变写法在chrome/safari/firefox中表现不一：firefox忽略声明回退为none，safari将transparent视为#000致全显，chrome/edge需双写-webkit-mask-image才生效。
mask-image 渐变写法在 Chrome/Safari/Firefox 中的实际表现差异
不是代码写错，是浏览器根本没按同一套规则解析 mask-image: linear-gradient()。Firefox（截至 2026 年中）完全忽略该声明，整条规则被丢弃；Safari 把 transparent 当作 #000 处理，结果遮罩全显；Chrome/Edge 虽支持，但只写标准属性会静默跳过，必须加 -webkit-mask-image 才触发渲染。
关键差异点：
- Safari 只认纯灰度值：
#000（隐藏）、#fff（显示），black/transparent/rgba()都会被降级为#000，导致遮罩失效 - Firefox 不解析任何渐变值，
mask-image回退为none，等同于没加 - Chrome/Edge 必须双写
mask-image和-webkit-mask-image，缺一不可
图片必须有可绘制内容，否则 mask-image 没东西可遮
mask-image 只控制「已绘制内容」的透明区域，它本身不提供图像或颜色。对空 div 直接设 mask-image 却没设 background，整个区域就是透明的，看起来像“没生效”。
正确做法：
- 用
<img>标签时，它自带内容，可直接加遮罩，但需确保有宽高（height: auto在父容器无高度时可能塌陷） - 用容器时，必须显式设置
background-image或background-color，不能用background: transparent（等于告诉浏览器“这里没内容”） - 容器必须有可计算尺寸：要么设
width/height，要么用aspect-ratio，否则遮罩区域不可控
必须显式声明 mask-size 和 mask-repeat
默认 mask-size: auto 和 mask-repeat: repeat 在各浏览器行为不一致，极易导致渐变平铺成条纹或拉伸失真。
硬性要求：
-
mask-size必须设为100% 100%或cover，不能依赖默认值 -
mask-repeat必须设为no-repeat，否则小渐变会重复平铺 -
mask-type建议显式设为luminance（虽是默认值，但在 Safari 中不写有时会意外走 alpha 通道逻辑）
有效写法示例：
.fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, #000, #fff);
mask-image: linear-gradient(to bottom, #000, #fff);
mask-size: 100% 100%;
mask-repeat: no-repeat;
mask-type: luminance;
}
别把 mask-image 加在滚动容器上
滚动区域要实现“固定边缘遮罩 + 内容可滚”，常见错误是把 mask-image 加在 .scroll-area 这类滚动容器上——结果遮罩跟着内容一起滚动，在 Safari 下甚至直接失效（已知 WebKit bug）。
正确结构：
- 外层容器设
overflow: hidden，并应用mask-image - 内层滚动容器设
overflow-x: auto、white-space: nowrap（或display: flex+flex-wrap: nowrap），且宽度足够容纳所有子项 - 避免给滚动容器设任何
mask-相关属性
最易被忽略的一点：Safari 对 file:// 协议下本地 HTML 的 mask-image 有严格 CORS 限制，开发时务必用本地服务器启动，而不是双击打开文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
