优先用SVG路径而非PNG——SVG为矢量，缩放不失真；PNG为位图，高DPI下易锯齿偏移，且Safari对PNG的alpha通道支持差，需改用SVG或退化为clip-path。
mask-image 用 SVG 路径还是 PNG？选错就失真
mask-image 支持 url()（指向 SVG 或 PNG）和 linear-gradient 等函数，但响应式遮罩的关键在于「缩放时不失真」。SVG 路径是矢量，缩放后边缘锐利；PNG 是位图，mask-image: url(mask.png) 在高 DPI 屏或放大视口下容易出现锯齿或偏移。
- 优先用内联 SVG：
mask-image: url("data:image/svg+xml;utf8,<svg>...</svg>")，避免额外请求，且可直接用viewBox控制缩放行为 - 若必须外链 SVG，确保其
viewBox="0 0 w h"与容器宽高比一致，否则mask-repeat或拉伸会破坏形状 - PNG 仅适用于简单黑白遮罩（如毛玻璃边缘），且需导出 @2x 版本并配合
image-set()，但兼容性差（Safari 15.4+ 才支持）
mask-size: cover 为什么没生效？检查 mask-origin 和 mask-position
mask-size: cover 表现异常，大概率是遮罩图层的定位基准错了。默认 mask-origin: border-box，但遮罩图像的渲染起点由 mask-origin 和 mask-position 共同决定：
- 如果容器有 padding 或 border，
mask-origin: border-box会让遮罩从边框外缘开始铺，导致图形被裁掉 - 改成
mask-origin: content-box，再配mask-position: center，才能让 SVG 路径居中撑满内容区 - 实际组合建议：
mask-size: cover; mask-origin: content-box; mask-position: center; - 注意：
mask-repeat: no-repeat必须显式声明，否则某些浏览器（旧版 Safari）会默认平铺
响应式断点下 mask 不随容器变形？用 CSS 自定义属性 + calc() 动态控制
SVG 遮罩本身不响应，但你可以让它「感知」容器尺寸变化。方法是把关键尺寸（如圆角半径、路径控制点坐标）抽成 CSS 自定义属性，在媒体查询中动态修改：
- 在 SVG 的
<path d="M0,0 Q<var>--mask-qx</var>,<var>--mask-qy</var> 100%,100%">中用attr()（暂不支持）不行，改用内联 style 绑定：mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><path d='M0,0 Q50,calc(var(--mask-qy, 30) * 1px) 100,100' fill='white'/></svg>"); - 更可靠的做法：用 JS 监听
resize，生成对应尺寸的 SVG 字符串并重设mask-image，尤其适合复杂不规则图形（如手绘轮廓） - 简单场景可用
mask-size: 100% 100%+mask-repeat: no-repeat，依赖容器自身宽高比约束
Safari 对 mask-mode: alpha 的兼容问题怎么绕开？
Safari（包括 iOS 16.4）仍不支持 mask-mode: alpha，即无法用 PNG 的 alpha 通道做遮罩（只认 luminance）。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 用 PNG 当遮罩时，Safari 会把灰度值当透明度，纯黑=完全透明，纯白=完全不透明，中间灰=半透——但设计稿常依赖 alpha 通道精细控制边缘，结果全糊了
- 解决方案只有两个：
- 改用 SVG 遮罩（天然支持 alpha 渲染逻辑，且 Safari 对 SVG
<mask>元素支持良好） - 或退化为
clip-path：对简单图形（多边形、圆、椭圆），clip-path: polygon(...)在 Safari 中更稳定，但无法实现渐变透明边缘
- 改用 SVG 遮罩（天然支持 alpha 渲染逻辑，且 Safari 对 SVG
CSS mask 的真正难点不在写法，而在「遮罩图像」与「目标容器」之间的坐标系对齐。一旦 viewport 缩放、容器 transform、父级 overflow hidden 同时存在，mask 就容易漂移——这时候别急着调 mask-position，先检查 transform-style: flat 和 will-change: transform 是否意外触发了新的 stacking context。
