mask-image仅视觉遮罩不改变文档流，clip-path则几何裁剪并重算布局边界；前者依赖图像透明度控制显示，后者通过路径定义实际排版区域。
mask-image 本身不裁剪文档流，只做视觉遮罩——想让文字或其它元素真实绕开不规则轮廓，它单独做不到。
mask-image 和 clip-path 的核心区别在哪
两者都让元素“看起来”变形状，但底层机制完全不同：
-
clip-path是几何裁剪：浏览器按路径重算元素的布局边界，影响float、shape-outside、文本环绕等所有排版逻辑 -
mask-image是像素级遮罩：只控制渲染时哪些像素画出来，DOM 盒子仍是完整矩形，getBoundingClientRect()返回的宽高完全不变 - 常见误用：给头像加
mask-image: url(heart.svg)后发现旁边文字还是被整个正方形“顶开”，不是因为 mask 没生效，而是它根本不管文字流
用 SVG 作为 mask-image 的硬性要求
内联 SVG 必须满足四个条件，否则在 Chrome/Firefox/Safari 中表现不一致甚至失效：
- SVG 必须用
url("data:image/svg+xml,")编码，不能直接写<svg></svg>标签 -
<path></path>必须闭合（以Z结尾），且填充色为white（非black）——mask-image 把白色区域当“可见”，透明/黑色当“隐藏” -
viewBox宽高需与目标元素尺寸比例匹配，否则波浪拉伸变形；例如做波浪分割线，viewBox="0 0 300 10"表示路径只占容器高度的 1/30 - 必须声明
-webkit-mask-image前缀，Safari 16.4+ 虽支持标准属性，但部分 SVG 渲染仍依赖前缀
为什么 mask-image + SVG 波浪比 clip-path 更稳
当你需要响应式波浪边框或流动动画时，mask-image 是更可靠的选择：
-
clip-path: path("M0,5 C50,0 ...")在缩放或 viewport 变化时贝塞尔控制点会失真，边缘出现锯齿 -
mask-image支持mask-repeat: repeat-x，一条小波浪路径就能铺满任意宽度容器，无需 JS 计算 - 配合
mask-position: x y+transition可实现平滑流动效果，而clip-path动画性能差、兼容性弱 - 注意：mask-position 动画必须搭配
mask-size固定值，否则 Safari 下会跳帧
文字环绕不规则图形的唯一可行路径
别试图用 mask-image 驱动环绕——浏览器根本不读它的 alpha 通道来算文本流。真正能落地的只有：
- 用
shape-outside: url("outline.png")，其中 PNG 必须是：纯黑图形 + 全透明背景（不是白底），尺寸与浮动容器一致 - 或用内联 SVG 的
<clippath></clippath>+shape-outside: url(#my-clip)，但需确保 SVG 在 DOM 中且 ID 可访问 -
mask-image可以和上面方案共存：比如先用shape-outside实现文字绕行，再叠加mask-image给容器加渐隐边缘，二者分工明确
最容易被忽略的一点：mask-image 的 SVG 中，fill="white" 是铁律，哪怕你用渐变或滤镜，最终参与遮罩计算的仍是 alpha 通道值——而浏览器对 SVG fill 颜色的解析，直接决定哪些区域“算白”。填错颜色，整个遮罩就失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
