mask-image本身不支持定位参数，真正控制遮罩位置的是mask-position、mask-size和mask-repeat三者协同；漏掉任一属性会导致错位、平铺或缩放失真。
直接结论：mask-image 本身不支持“定位”参数，所谓“配合定位”，本质是控制遮罩图的渲染位置，靠的是 mask-position + mask-size + mask-repeat 这组属性协同生效；漏掉任意一个，渐变镂空就容易错位、平铺或缩放失真。
为什么 mask-image 的渐变看起来“没对齐”？
常见错误现象：写了 mask-image: linear-gradient(to bottom, #000, #fff)，但淡出区域总在顶部/底部边缘，无法精准控制镂空起始位置。
-
mask-image渐变默认从元素左上角开始绘制，且默认mask-repeat: repeat—— 意味着它可能横向/纵向平铺，尤其当容器宽高比和渐变方向不匹配时，视觉上就像“错位” - 必须显式设
mask-repeat: no-repeat，否则渐变会重复出现，破坏镂空连续性 -
mask-size不设为100% 100%或cover，渐变可能被拉伸/压缩，导致过渡区域比例失真 -
mask-position才是真正“定位”的开关，比如想让淡出从右边缘开始，得写mask-position: right或mask-position: 100% 50%
如何用 mask-position 精确控制镂空起点？
关键点：渐变方向（to right / to bottom）和 mask-position 是联动关系——前者决定渐变轴向，后者决定该轴向的起始锚点。
- 要实现“从右往左淡出”，不能只写
to left，而应：mask-image: linear-gradient(to left, #000, #fff)+mask-position: right - 要让圆形镂空居中，用
radial-gradient(circle at 50% 50%, #000 0%, #fff 60%)+mask-position: center（注意 Safari 对radial-gradient支持有限，建议仅用于 Chrome/Edge） - 想让镂空条固定在距顶部 20px 处？写
mask-position: center 20px，前提是mask-size足够覆盖该区域，否则会被裁剪 - 移动端需注意：百分比值在视口缩放下可能偏移，优先用
px或vh/vw单位做微调
Safari 和 Firefox 下 mask-position 失效的典型原因
不是 mask-position 本身不生效，而是它依赖的 mask-image 在这些浏览器里根本没加载成功，导致整个遮罩链失效。
- Safari（15.4+）：若渐变里用了
transparent或rgba()，会静默转成#000，导致遮罩全显 →mask-position再准也白搭。必须改用纯灰度：#000/#fff/#808080 - Firefox（2026 年中）：仍完全忽略
mask-image: linear-gradient()声明 → 此时mask-position根本无作用对象。唯一解是换内联 SVG：mask-image: url("data:image/svg+xml;utf8,<svg>...<mask>...</mask></svg>#m") - 所有浏览器：若忘了加
-webkit-mask-image前缀，Chrome/Edge 可能只渲染标准属性，但旧版 Blink 内核实际依赖前缀触发，导致mask-position无处生效
最易被忽略的一点：mask-position 的参考系是遮罩图像自身，不是元素内容区。当你用 mask-size: 200% 200% 放大遮罩图时，mask-position: 50% 50% 实际指向的是放大后图像的中心，而非容器中心——这种尺度错位，在调试复杂镂空动画时几乎必然踩坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
