mask-image 渐变无效主因是元素无可见内容，需确保有背景或文字；Safari 要求纯灰度渐变，Firefox 不支持渐变值；跨浏览器稳定方案为 SVG 遮罩，且白显黑隐。
mask-image 渐变写法为什么总没反应
写了 mask-image: linear-gradient() 却看不到遮罩效果，大概率不是语法错，而是元素本身没内容可遮——mask-image 不会凭空“画出”形状，它只控制已有内容的可见区域。常见错误是给一个空 div 或未设背景的容器直接加遮罩，结果整个区域透明得像消失了一样。
必须确保元素有可被遮罩的视觉内容：
- 对图片或带背景的块：显式设置
background-image或background-color - 对文字：先用
color: transparent+background-clip: text把文字转为“背景”，再用mask-image控制其渐隐 - 渐变方向要匹配内容流向：横排文字用
to right，竖排用to bottom - 别用
transparent作渐变终点色（尤其在 Safari 中），改用#000或#fff；Safari 对rgba(0,0,0,0)解析不稳定，会静默失效
Safari 和 Firefox 对 mask-image 的兼容性断层
mask-image 在浏览器间差异极大，不是“加个前缀就能跑”，而是逻辑层面不一致：
- Safari（15.4+）要求渐变必须是纯灰度：只认
#000（全遮）、#fff（全显）、中间灰阶（半透）；transparent被转成#000，rgba()常被忽略 - Firefox 目前仍不支持
mask-image的渐变值，声明会被完全跳过，退回到无遮罩状态 - Chrome/Edge 支持良好，但旧版 Blink 内核需
-webkit-mask-image才能触发渲染 - 真正跨浏览器稳定的方案只有 SVG 遮罩：
mask-image: url("data:image/svg+xml,...")，所有现代浏览器都按 alpha 通道解析
用 SVG 实现可控不规则遮罩的关键点
比起渐变，SVG 是实现波浪、气泡、手绘边缘等不规则遮罩最可靠的方式，但要注意几个实操细节：
立即学习“前端免费学习笔记（深入）”；
- SVG 必须含
<mask>元素，且内部图形用fill控制灰度：白色fill="#fff"区域显示，黑色fill="#000"区域隐藏 - 推荐用 data URI 内联 SVG，避免 CORS 问题（Safari 对
file://和跨域url()限制极严） - 用
mask-size: contain或cover控制 SVG 遮罩缩放，避免拉伸变形；配合mask-repeat: no-repeat防止意外平铺 - 若需动画波浪边框，不要 animating SVG path，而应 animating
mask-position或用 CSS 变量驱动mask-image的 data URI 参数（更轻量）
mask-image 和 shape-outside 的根本区别
想让文字绕着不规则轮廓走？别指望 mask-image。它只是视觉裁剪，不改变盒模型的文档流位置：
-
mask-image后的元素在 DOM 中仍是完整矩形，占据全部width/height，文字仍被整个矩形“推开” -
shape-outside才是文字环绕的正解，但它只接受两种形状源：CSS 几何函数（circle()、polygon()）或带 alpha 通道的图像（url(mask.png)或内联 SVG） - 目前没有任何浏览器支持把
mask-image输出的 alpha 信息喂给shape-outside——这是两个独立渲染层，无法桥接 - 真要实现气泡文字环绕，唯一路径是：用 SVG 定义轮廓 → 作为
shape-outside: url(...)源 → 同时用mask-image做视觉增强（比如加柔边）
最易被忽略的点是：mask-image 的灰度逻辑和人眼直觉相反——白显黑隐，不是“遮罩色覆盖即隐藏”。很多人调反了黑白顺序，结果遮罩效果完全颠倒。动手前先在纸上画一条白→黑渐变，再对应到你要淡出的方向。
