chrome中mask-image需同时声明-webkit-mask-image和mask-image，仅写标准属性会失效；值须为url()或渐变；svg遮罩要避免viewbox冲突；mask-position动画需加transition且用坐标值；mask-size须与background-size匹配；firefox不支持该属性，需用clip-path或canvas降级。
mask-image 在 Chrome 里不生效？检查是否漏了 -webkit-mask-image
Chrome 和 safari 对 mask-image 的支持至今仍依赖前缀，仅写 mask-image 会导致遮罩完全失效，页面看起来像啥都没做。
- 必须同时声明
-webkit-mask-image和标准mask-image，否则在 Chrome（包括新版 edge）中无效果 -
mask-image值不能是纯色或渐变——它只接受url()、linear-gradient()或radial-gradient()，但注意：某些旧版 WebKit 只认url()形式 - 如果用 SVG 作为遮罩源，确保 SVG 文件内没有
viewBox缩放冲突，或直接内联 SVG 并设width/height为0避免意外渲染
滑动遮罩动不了？mask-position 动画需要显式设置 transition
mask-position 本身支持 css 动画，但它不像 transform 那样默认可动画——没写 transition 就只会跳变，看不出滑动效果。
- 必须给元素加
transition: mask-position 0.3s ease;（或-webkit-mask-position） - 动画触发时，
mask-position的起始值和目标值都得是明确的坐标，比如0% 0%→100% 0%；写left/right这类关键字在部分浏览器中不可动画 - 若配合
@keyframes，记得在关键帧里也带上-webkit-mask-position，否则 Safari 动画会卡住
图片边缘发虚或锯齿？mask-size 和 background-size 不匹配是主因
遮罩图和背景图尺寸对不上，就会拉伸/压缩遮罩区域，导致滑动时边缘模糊、像素错位，甚至出现意外透出。
- 用
mask-size: cover;或mask-size: 100% 100%;确保遮罩图完整覆盖背景图，别依赖默认值 - 如果背景图用了
background-size: contain;，遮罩图也得同步设成contain，否则两者缩放逻辑不同步 - 高 DPR 屏幕下，SVG 遮罩建议用
vector-effect="non-scaling-stroke"防止描边糊掉；位图遮罩优先用 2x 分辨率 PNG
Firefox 完全不认 mask-image？换 mask-border 或改用 clip-path 临时兜底
Firefox 目前（v120+）仍不支持 mask-image，连前缀版也无效。这不是你写错了，是浏览器就是没实现。
立即学习“前端免费学习笔记（深入）”；
- 别浪费时间调试 Firefox 下的
mask-image，它不会工作 - 简单场景可降级用
clip-path: inset(...)模拟线性滑动遮罩，虽然灵活性差，但兼容性好 - 若必须用图像遮罩，考虑 js 方案：用
canvas绘制遮罩合成，或切换为 SVG<mask></mask>+<image></image>结构（需内联 SVG）
真正麻烦的是 mask-origin 和 mask-clip 的组合行为，不同浏览器对它们的默认值处理不一致，一动就偏移——建议所有 mask 相关属性都显式写全，别信“默认刚好”。