要营造h5页面“深邃深渊感”背景，需用冷调径向渐变模拟光线衰减：中心用#0a0a1a等冷黑，中段加#1e2a3a青灰过渡，边缘用rgba(255,255,255,0.03)微光弥散；强制circle at center与farthest-side确保对称饱满；建议双层叠加（径向基底+线性扰动）增强纵深，并控制色标≤4以保性能。
要在 H5 页面中用径向渐变营造“深邃深渊感”背景，关键不是堆叠暗色，而是模拟空间纵深与光线衰减——中心极暗或吸光，边缘微亮但冷寂，配合低饱和、高明度梯度过渡，辅以透明度控制和层叠逻辑，让视觉自然沉入中心。
核心配色与明暗节奏
深渊感本质是“光被吞噬”的错觉，需打破常规由亮到暗的思维，反向设计：
- 起始色（中心）用接近纯黑但带冷调的深蓝/紫灰，例如 #0a0a1a 或 hsl(240, 20%, 5%)，避免死黑（#000）显得平面
- 中间段（约 60%–80% 位置）加入极低饱和的青灰，如 #1e2a3a，制造“幽暗水体”或“稀薄星云”的过渡质感
- 边缘（100%）不用纯白或亮色，而用 rgba(255, 255, 255, 0.03) 或 hsla(210, 10%, 15%, 0.05)，实现“微光弥散而非照亮”，强化空旷与不可测
形状与尺寸必须显式控制
默认 ellipse farthest-corner 在宽屏下会拉伸成扁椭圆，破坏“深渊漩涡”感。应强制使用：
- circle at center：确保几何中心对称，符合人眼对“深渊入口”的直觉认知
- 尺寸推荐 farthest-side：让渐变半径始终贴合容器最远边，无论横竖屏都保持饱满包裹感，不露白边也不挤压
- 完整写法示例：
radial-gradient(circle at center, #0a0a1a 0%, #1e2a3a 70%, rgba(255,255,255,0.03) 100%)
背景层叠增强纵深
单层径向渐变容易单薄。可叠加两层，分工明确：
-
底层：大范围、超慢过渡的冷灰径向渐变（
farthest-side, 0%→100% 跨越整个视口），奠定空间基底 -
中层：稍小范围（
closest-side）、带轻微噪点纹理的同色系线性渐变（如to bottom right），模拟气流扰动或微弱引力扭曲 - 写法示例：
background-image: radial-gradient(circle at center, #0a0a1a 0%, #1e2a3a 70%, rgba(255,255,255,0.03) 100%), linear-gradient(135deg, transparent, rgba(30,42,58,0.1), transparent);
适配与性能注意点
深渊感依赖细腻过渡，但需兼顾移动端表现：
- 避免在渐变中使用过多色标（超过 4 个），尤其在低端 Android WebView 中易卡顿或渲染异常
- 不要依赖
background-size: cover—— 它对渐变无效；改用background-size: 100% 100%+no-repeat确保填充，或直接用farthest-side更安全 - 为 IE11 及更旧浏览器提供 fallback：
background-color: #0a0a1a; background-image: radial-gradient(...);
