最简响应式遮罩方案是用mask-image配mask-size: 100% 100%，但须双前缀、禁用transparent、容器有可计算尺寸；渐变遮罩应改用#fff/#000灰度值并同时声明-webkit-mask-image和mask-image；精确居中圆形遮罩推荐内联SVG，用百分比定义圆心与半径；mask-size优先100% 100%而非cover/contain，且容器需设宽高或aspect-ratio。
直接用 mask-image 配 mask-size: 100% 100% 是最简响应式路径，但必须显式声明双前缀、禁用 transparent、且容器要有可计算尺寸——否则 Safari 静默失效，Firefox 直接忽略。
为什么 radial-gradient(circle, white 50%, transparent 70%) 在移动端根本没反应
不是代码写错了，是浏览器对渐变遮罩的解析逻辑分裂：
- Safari 把
transparent当作#000导致全显 - Firefox（2026 年中）压根不支持渐变值，整条声明被跳过
- Chrome/Edge 必须带
-webkit-mask-image才触发渲染
改用纯灰度值：radial-gradient(circle, #fff 50%, #000 70%)——白显黑隐，各端行为一致。必须同时写：-webkit-mask-image 和 mask-image，不能只写后者。
如何让圆形遮罩始终居中且半径占容器宽高的 40%
靠 mask-size 算比例太绕：mask-size: 250% 250% 这类反向推算容易错，而且 radial-gradient 的圆心定位受 mask-position 和容器尺寸影响极大。真要精确控制，不如切 SVG。
立即学习“前端免费学习笔记（深入）”；
- 内联一个最小化 SVG：
<svg width="0" height="0"><defs><mask id="circle-mask"><rect width="100%" height="100%" fill="#000"/><circle cx="50%" cy="50%" r="40%" fill="#fff"/></mask></defs></svg> - CSS 中引用：
-webkit-mask: url(#circle-mask); mask: url(#circle-mask); - SVG 内部用百分比单位（
cx="50%",r="40%"），天然响应式，无需 JS 或媒体查询 - 确保容器有
aspect-ratio或固定宽高，否则50%基准会漂移
mask-size: cover 和 contain 到底该选哪个
二者在渐变或 SVG 遮罩上效果常不如直接写 100% 100% 可控：
-
mask-size: cover适合位图遮罩（如 PNG logo），但需配合mask-position: center防偏移 -
mask-size: contain适合小图标遮罩（如 icon mask），避免失真，但响应式下留白位置难预测 - 对
radial-gradient或 SVG，优先用mask-size: 100% 100%+mask-position: center，语义清晰、行为稳定
别用 mask-si（拼写错误会静默失效），也别对 <img> 直接加 mask——应套一层 <div> 作容器，并设明确宽高（如 width: 100%; aspect-ratio: 4/3;）。
