mask-image 不能实现盒模型的不规则裁剪，它仅控制像素级透明度，不改变布局边界、不缩小点击区域、不影响文字环绕；真正裁剪盒模型的是 clip-path。
mask-image 不能实现盒模型的不规则裁剪——它只控制像素级透明度，不改变布局边界、不缩小点击区域、不影响文字环绕。
真正能“裁剪盒模型”的是 clip-path；mask-image 做的是视觉遮罩，二者职责完全不同。
为什么 mask-image 不等于裁剪盒模型
mask-image 的作用对象是渲染层，不是布局层。即使你用 SVG 把一个 div 遮成星星形，getBoundingClientRect() 返回的仍是原始矩形尺寸，父容器仍按这个矩形分配空间，旁边文字照样被整个宽高“顶开”，鼠标也照常能点中被遮住的区域。
常见误判现象：
- 加了
mask-image: url(heart.svg)后发现下方元素被意外撑开 → 实际是 mask 没动盒模型，只是“看不见”了 - 以为遮住的部分就不可交互 → 错，事件系统完全无视 mask，只认原始盒模型
- 用渐变做软边裁剪，结果响应式缩放后边缘撕裂 → 因为
mask-size和mask-position默认不随容器自动适配
mask-image 正确使用场景
它适合解决「视觉软边」或「动态透明过渡」类问题，而非几何裁剪：
- 实现聚光灯效果：
mask-image: radial-gradient(circle at var(--x) var(--y), black, transparent 60%) - 叠加烟雾/胶片划痕等带半透明纹理的效果，需依赖 alpha 通道变化
- 配合
@keyframes动画mask-position或渐变色 stops，做出流动波浪边（比clip-path动画更稳） - 与
clip-path混用时，mask-image在后者基础上再加软边 —— 它优先级更高
用 SVG 作 mask-image 的硬性条件
内联或外部 SVG 都必须满足以下四点，否则在 Chrome/Firefox/Safari 中表现不一致甚至失效：
- 必须用
url("data:image/svg+xml,...")编码，不能直接写<svg></svg>标签 -
<path></path>必须闭合（以Z结尾），且fill="white"—— 白色区域才可见，黑色/透明为隐藏 -
viewBox宽高比例要匹配目标元素，否则拉伸变形；例如波浪线建议viewBox="0 0 300 10" - 必须声明
-webkit-mask-image前缀，Safari 16.4+ 虽支持标准属性，但部分 SVG 渲染仍依赖前缀
容易被忽略的关键细节
最常漏掉的一点：mask-image 的遮罩计算只看最终 alpha 值，而浏览器对 SVG 中 fill 的解析会直接影响哪些区域“算白”。哪怕你用了渐变或滤镜，只要最终输出到 alpha 通道的是非 1 值，那一块就被当“透明”处理 —— 所以 fill="white" 是铁律，不是可选项。
另一个隐形坑：mask-origin 默认是 border-box，但如果你改过 box-sizing 或加了 padding，又没同步调 mask-origin，遮罩就会偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
