用两层渐变（径向+线性）叠加营造纵深感蒙层，适配暗黑模式并优化毛玻璃、点击穿透与微动效。
直接用 CSS 线性渐变叠加在遮罩层上，配合透明度控制与混合模式微调，就能做出有纵深感、不生硬的暗黑蒙层——关键不在“多黑”，而在“有层次”。
用多层渐变模拟空间深度
单色半透明黑（如 rgba(0,0,0,0.7)）容易显得沉闷呆板。推荐分两层绘制：
-
底层氛围：从画布中心向外扩散的径向渐变，例如
radial-gradient(circle at center, rgba(18,18,18,0.6), transparent 70%)，营造柔和的空间包裹感 -
中层结构：叠加一个带方向的线性渐变，比如
linear-gradient(135deg, transparent 0%, rgba(30,30,30,0.2) 50%, transparent 100%)，增加视觉节奏和微妙明暗过渡
两层叠加后，蒙层不再是平面灰黑，而是有中心聚焦、边缘缓释的呼吸感。
适配暗黑模式并保持一致性
移动端用户可能已开启系统级暗黑模式，蒙层需自动协调而非强行覆盖：
- 在遮罩层容器上添加媒体查询：
@media (prefers-color-scheme: dark) { background: ... }，使用更收敛的深灰系（如#121212起始）避免过曝或死黑 - 若页面本身支持主题切换，建议将蒙层样式也纳入 CSS 变量体系，例如定义
--mask-bg-dark: radial-gradient(...);，通过.dark .overlay类统一控制
性能与交互细节优化
高级感常藏在细节里，这几个点容易被忽略但影响体验：
- 遮罩层必须设
backdrop-filter: blur(4px)（现代浏览器支持），毛玻璃效果能显著提升质感；降级时用background-blend-mode: overlay配合浅纹理图做轻量替代 - 确保
pointer-events: none仅作用于蒙层内容区，而点击穿透区域避开弹窗主体——否则用户误点蒙层会意外关闭弹窗 - 动画入场时，用
opacity+transform: scale(1.02)微动，比单纯淡入更有“浮现”感
不复杂但容易忽略。
