用 mask-image 做响应式图片遮罩，关键在于控制遮罩图案的渲染单元尺寸和定位方式；mask-size: contain、mask-position: center、mask-repeat: no-repeat 三者缺一不可，否则遮罩会错位、拉伸或重复铺满。
直接说结论：用 mask-image 做响应式图片遮罩，关键不是“让 SVG 图像缩放”，而是控制遮罩图案的**渲染单元尺寸和定位方式**；mask-size: contain + mask-position: center + mask-repeat: no-repeat 这三者缺一不可，否则遮罩会错位、拉伸或重复铺满。
为什么 mask-image 在不同尺寸下容易变形或偏移
SVG 作为 mask-image 的数据源时，它的 viewBox="0 0 100 100" 定义的是逻辑坐标系，不是像素尺寸。浏览器默认把 SVG 当作“固定大小图像”来平铺（mask-repeat: repeat），而不是按容器比例缩放。所以哪怕你用了 width: 100% 的图片，遮罩仍可能只盖住左上角一小块，或者被拉成椭圆。
-
mask-size: contain让 SVG 按比例缩放到刚好完整显示在元素内（不裁剪） -
mask-position: center确保缩放后居中对齐，避免偏左/偏上 -
mask-repeat: no-repeat必须显式声明——这是最容易漏掉的一条，默认是repeat，会导致圆形遮罩变成一整片马赛克
用 data URL 写 inline SVG 遮罩时的编码陷阱
内联 SVG 必须做 URL 编码，否则浏览器解析失败，mask-image 直接失效（开发者工具里看到属性灰掉，但没报错）。常见错误包括：空格没转义、引号没转义、 和 <code>> 写成原字符。
必须写成 <code>%3C，>必须写成%3E- 双引号
"要写成%22（虽然某些浏览器宽容，但 Safari 严格） - 整个 data URL 不能换行，也不能有注释或多余空格
- 推荐用在线工具编码，或用 JS 的
encodeURIComponent()处理原始 SVG 字符串
mask-size 对渐变遮罩的影响常被误解
很多人以为 mask-size 只对图片类遮罩起作用，其实它对 radial-gradient 或 linear-gradient 同样生效——但它控制的不是“渐变本身大小”，而是“这个渐变图案作为一个单元 tile 的尺寸”。
-
mask-image: radial-gradient(circle, white 50%, transparent 70%)配mask-size: 200px 200px→ 渐变单元是 200×200 的正方形，中心白色圆半径为 100px - 配
mask-size: 100% 100%→ 单元尺寸等于元素自身宽高，此时白色圆半径就是元素宽高的一半，真正响应式 - 想做“始终居中、半径占容器宽高 40%”的效果？得用
mask-size: 250% 250%反向推算，不如直接切 SVG 更可控
移动端 Safari 的兼容性雷区
iOS Safari（尤其 16.4 之前）对 mask-image 支持较弱，且不支持 inset、aspect-ratio 等现代属性，导致遮罩层错位或不显示。
- 必须加
-webkit-mask-image前缀，且顺序放在标准属性前面 - 避免在父容器上用
transform（如translateZ(0)），它会创建新的 stacking context，导致遮罩层被截断 - 测试时务必真机打开，模拟器有时表现正常但实际设备失效
- 降级方案：用伪元素
::before+background: radial-gradient替代，虽不支持 alpha 通道裁剪，但兼容性好得多
最麻烦的点其实是：mask-image 的行为高度依赖于父容器的盒模型、定位上下文和 transform 层级——改一个 overflow: hidden 或加一行 will-change: transform，都可能让遮罩突然消失。调试时优先检查祖先元素有没有意外触发新格式化上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
