iOS Safari 中 mask-image 渐变需纯灰度值（如#000、#888），禁用 transparent/rgba；推荐 clip-path: path() 动态生成并缩放坐标，或伪元素 background-gradient 实现视觉渐隐。
mask-image 渐变在 iOS Safari 里不生效，不是写错了
你写的 mask-image: linear-gradient(to right, transparent, black) 在 Chrome 里正常，在 iOS Safari 里直接“看不见效果”，控制台也不报错——这不是语法问题，是 Safari 对渐变遮罩的解析规则和 Chrome 完全不同。它要求渐变必须是纯灰度值：#000（全显）、#fff（全隐）、中间只能用十六进制灰阶（如 #888），任何 rgba()、transparent 或命名色都会被静默忽略或降级为全透明。
真正能跑通的移动端渐变边缘方案只有 clip-path + path 动态注入
如果你的目标是让卡片/图片左右边缘有平滑渐隐，且必须兼容 iOS 16.4+ 和主流安卓机，clip-path: path() 是目前唯一稳定、可交互、热区准确的方案。它直接裁剪几何形状，不会出现 mask 那种“视觉渐隐但点击区域仍是矩形”的错位问题。
-
path()必须用 JS 动态生成坐标，不能硬写像素值：横竖屏切换、软键盘弹出、DPR 变化都会导致路径偏移 - 关键坐标要乘以
window.devicePixelRatio缩放，否则高 PPI 屏幕下边缘会模糊或错位 - 必须加降级 fallback：
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)，否则老机型显示完整矩形 - 路径末尾建议预留至少
8px的直角过渡段，防止手指点在弧形凹口边缘触发误操作
非交互静态场景才考虑 mask-image，且必须满足四条硬约束
仅当你的渐变边缘用于 Banner 底部波浪边、无滚动、无点击、无动画的静态背景时，才能勉强用 mask-image。但必须同时满足：
- 遮罩图必须内联 SVG：
mask-image: url("data:image/svg+xml,%3Csvg...")，避免网络请求失败或跨域问题 - 显式声明
mask-mode: luminance，否则 Firefox/Safari 解析逻辑不一致 -
mask-size: cover且mask-position: center，禁用contain（小屏下留白） - SVG 中显示区填
fill="black"，镂空区留透明或fill="white"（luminance 模式下白=全显）
伪元素叠加 background-gradient 是最实用的“视觉替代”方案
如果只是想让文字在图片上更易读、或制造“边缘融于背景”的观感，::before + background: linear-gradient() 比真遮罩更可靠：
- 完全支持
rgba(0,0,0,0.7)，透明度实时生效，调试直观 - 响应式缩放天然适配，不用监听
resize或focusin - hover 动画、transition 都能直接作用于渐变方向和透明度
- 不改变真实 DOM 结构和事件热区，不存在 mask 带来的点击穿透或滚动偏移问题
真正落地的项目里，没人只写一次 mask-image 就完事；而伪元素方案，改两行 CSS 就能上线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
