<p>radial-gradient 作为 mask-image 必须显式声明 at center，否则默认从左上角起始；black 表示完全遮盖、transparent 表示完全显示；需配合 background-color 或 backdrop-filter 才可见高亮效果；兼容性差，须添加 -webkit- 前缀及纯色 fallback。</p>
radial-gradient 作为 mask-image 的写法必须带 at center
不写 at center，mask 就会默认按容器左上角起始，高亮区域偏移到角落；即使你设了 background-position: center，它也只影响图片层，不影响 mask 层。正确写法必须显式声明位置：mask-image: radial-gradient(circle at center, ...)。iOS Safari 对 at 50% 50% 支持不稳定，at center 是最稳妥的选择。
mask-image 中 black 和 transparent 的含义容易反直觉
在 mask-image 里，black 表示「完全遮盖」，transparent 表示「完全显示」——和常规背景渐变正好相反。想让中心区域高亮（即只显示中间）、四周模糊隐藏，就得这样写：mask-image: radial-gradient(circle at center, transparent 0%, transparent 120px, black 150px)。其中：
• transparent 120px：120px 半径内全显示
• black 150px：120–150px 区间从透明过渡到完全遮盖
• 超过 150px 的区域自动为 black（即彻底隐藏）
局部高亮必须配合 background-color 或 backdrop-filter 才可见
mask-image 本身不提供颜色或模糊，它只是「开窗」。如果背后没内容，高亮区就是空白。常见做法有：
• 给容器设 background-color: rgba(0,0,0,0.3)，让遮罩外区域变暗，反衬中心明亮
• 叠加 backdrop-filter: blur(6px) 实现毛玻璃边缘，但注意 Safari 需加 -webkit-backdrop-filter
• 若用图片作背景，确保 background-size: cover 且 background-position: center，否则 mask 区域和图像内容错位
mask-image 兼容性仍是硬伤，fallback 方案不能省
Firefox 一直到 v128 才完整支持 mask-image，旧版 Edge 完全不支持，部分安卓 WebView 会忽略该属性。上线前必须加降级：
• 先写标准属性：mask-image: radial-gradient(...)
• 再紧跟一行 WebKit 前缀：-webkit-mask-image: radial-gradient(...)
• 最后补一个纯色遮罩 fallback：background: radial-gradient(circle at center, rgba(255,255,255,0.1), transparent 70%) ——虽然不是真 mask，但至少保留视觉意图
真正需要精确局部高亮的场景，别指望靠单个属性一劳永逸；复杂需求建议用伪元素 + z-index 分层控制，兼容性更稳。
立即学习“前端免费学习笔记（深入）”；
