网页横幅怎么使用 CSS 径向渐变模拟深邃的宇宙星空-H5教程-PHP中文网

纯css径向渐变可实现宇宙星空横幅：以#020818深蓝紫黑为底，叠加3–4层由远及近的rgba径向渐变模拟星云光晕，再用box-shadow伪随机生成星光点，辅以微动效与视差滚动增强纵深感。

网页横幅怎么使用 css 径向渐变模拟深邃的宇宙星空

用 CSS 径向渐变模拟宇宙星空横幅，核心是叠加多层不同色值、透明度和尺寸的径向渐变，配合深蓝/紫黑底色与微光点效果，营造出空间纵深感。不需要图片，纯 CSS 即可实现轻量、响应式、可缩放的星空背景。

基础星空底色：深空主调

从一个接近纯黑但带极细微蓝紫倾向的背景开始，避免死黑（#000），推荐使用 #020818 或 #0a0e21。这是所有渐变的基底，确保后续光晕有足够对比度。

分层径向渐变：模拟星云与光晕

在 background 属性中按顺序叠加 3–4 层 radial-gradient()，由远及近、由淡到亮：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

最底层（遥远星云）：大范围、低透明度的紫蓝色渐变，如 radial-gradient(circle at 20% 30%, rgba(100, 50, 200, 0.08) 0%, transparent 70%)
中层（主星云团）：偏心放置、稍高透明度的青蓝渐变，例如 radial-gradient(circle at 70% 60%, rgba(30, 120, 200, 0.12) 0%, transparent 60%)
近层（恒星辉光）：小而亮的白色/淡黄渐变，模拟恒星周围散射光，如 radial-gradient(circle at 40% 20%, rgba(255, 255, 220, 0.2) 0%, transparent 30%)

添加星光点缀：伪随机光点

仅靠渐变还不够“星”。可用 box-shadow 配合伪元素或额外 div 模拟星点：

新建一个绝对定位的 ::before 伪元素，设为透明背景
用多个 box-shadow 值生成数十个不同位置、大小、亮度的白点，例如：
box-shadow: 10px 20px 0 #fff, 200px 150px 0 #eef, 320px 80px 0 #fff;
为增强真实感，可对部分“星点”加 blur（如 1px 1px 2px #fff）模拟大气散射

增强纵深与动效（可选）

让星空“呼吸”起来，提升沉浸感：

给某一层渐变（如中层星云）添加轻微 animation: pulse 15s infinite alternate，改变其 background-size 或透明度
结合 background-attachment: fixed 实现视差滚动效果（需父容器有高度且内容可滚动）
避免过度动画——宇宙是静谧的，微动即可

实际使用时，把多层渐变写进 banner 的 background，再叠加上述光点与动效，就能得到一片无需加载、适配 Retina、缩放不糊的 CSS 宇宙横幅。