直接用 mask-image 配 mask-size: 100% 100% 是最简响应式路径，但必须显式声明双前缀、禁用 transparent、且容器要有可计算尺寸——否则 safari 静默失效，firefox 直接忽略。
直接用 mask-image 配 mask-size: 100% 100% 是最简响应式路径，但必须显式声明双前缀、禁用 transparent、且容器要有可计算尺寸——否则 Safari 静默失效，Firefox 直接忽略。
为什么 mask-image: radial-gradient(...) 在移动端根本没反应
不是代码写错了，是浏览器对渐变遮罩的解析逻辑分裂：Safari 把 transparent 当作 #000 导致全显；Firefox（2026 年中）压根不支持渐变值，整条声明被跳过；Chrome/Edge 必须带 -webkit-mask-image 才触发渲染。你写的 radial-gradient(circle, white 50%, transparent 70%) 在三端表现完全不同。
- 改用纯灰度值：
radial-gradient(circle, #fff 50%, #000 70%)—— 白显黑隐，各端行为一致 - 必须同时写：
-webkit-mask-image和mask-image，不能只写后者 -
mask-size: 100% 100%强制拉伸到容器宽高，避免默认auto在 Safari 下缩成 0×0 - 别在
<img>上直接加 mask，应套一层<div> 作容器，并设明确宽高（如 <code>width: 100%; aspect-ratio: 4/3;）如何让圆形遮罩始终居中且半径占容器宽高的 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"></rect><circle cx="50%" cy="50%" r="40%" fill="#fff"></circle></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 到底该选哪个
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-size: auto—— 各浏览器实现不一，Safari 可能当 0 处理
伪元素叠加 background-gradient 是不是更省事
是，但得清楚它不是真遮罩：它只是盖一层渐变层，不改变原图 Alpha 通道，无法实现镂空、文字挖洞等真实裁剪效果。
- 适用场景：图片上加“从黑到透明”的蒙版突出标题文字，或 hover 时淡入遮罩
- 优势：支持
rgba()、transition、hover动画，兼容性碾压mask-image - 关键写法：
&::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent); } - 注意：容器必须
position: relative，且图片要用background-image而非<img>标签，否则伪元素会盖不住
真正需要 Alpha 级裁剪时，SVG
<mask></mask>引用是目前唯一跨浏览器稳定的方案；若只是视觉模拟，伪元素方案省心又可靠。别在mask-image上硬扛兼容性问题，先想清楚你要的是“挖洞”还是“盖层”。 - 内联一个最小化 SVG：
