必须设 min-height: 100vh 并配 fallback 色，否则渐变仅显顶部或闪屏；推荐浅灰到深灰线性渐变，加 color-scheme 声明防深色模式覆盖，顶层容器需避免 transparent 背景透出。
直接用 background: linear-gradient() 就能实现，但默认浅色到深色的渐变容易“看不见”——因为 body 高度没撑满视口，或者 fallback 色和渐变色太接近，导致视觉上像没生效。
body 高度不够导致渐变只显示顶部一小条
浏览器里 body 默认高度由内容决定，空页面或内容少时，渐变只渲染在那几行文字的高度内，下方大片区域还是白色（或用户系统深色模式下的默认底色）。
- 必须设
min-height: 100vh，不是height: 100vh——后者在内容超出视口时会导致底部被截断 -
html元素也要加min-height: 100%或height: 100%，否则某些布局下body的vh会失效 - 别漏掉
margin: 0，否则浏览器默认body外边距会让渐变边缘露白
浅入深渐变的方向与颜色值怎么选才自然
“浅入深”不是简单写 #fff → #000。纯白到纯黑在多数屏幕上会显得生硬、发灰，尤其在 OLED 屏或深色模式下对比过强。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 推荐起始色用带暖调的浅灰，比如
#f8f9fa（Bootstrap 默认背景），终点用中深灰如#212529（非纯黑） - 方向建议用
to bottom或180deg，避免斜向造成视觉重心偏移 - 如果想加一点层次感，中间插一个过渡色：
linear-gradient(to bottom, #f8f9fa, #e9ecef, #212529) - 别写
to bottom拼错成bottom——漏掉to整个声明就无效
fallback 色设不好，渐变不生效时页面就“闪白”或“闪黑”
渐变本质是 background-image，一旦不支持（比如极老 IE 或 CSS 被禁用），浏览器会回退到 background-color。如果 fallback 色和你想渐变的起点色差太大，加载瞬间会明显闪烁。
- fallback 色应取渐变第一段的颜色，比如
background-color: #f8f9fa - 写法要用
background简写，而不是分开写background-color和background-image，否则可能覆盖出错 - 完整可靠写法示例：
body {<br> margin: 0;<br> min-height: 100vh;<br> background: #f8f9fa;<br> background: linear-gradient(to bottom, #f8f9fa, #e9ecef, #212529);<br>}
深色模式下渐变可能被系统强制覆盖
Safari 和 Edge 在开启系统深色模式且页面没声明 color-scheme 时，会悄悄把你的浅色 fallback 色改成灰调，甚至反色文字——你写的渐变还在，但整体观感已失控。
- 加一行
html { color-scheme: light dark; }告诉浏览器你支持双模式 - 别依赖渐变本身做主题切换，它只是装饰；主题逻辑该用 class 控制（如
body.light/body.dark） - 测试时真机开深色模式看效果，模拟器有时不触发真实覆盖行为
最易被忽略的是：渐变设在 body 上，但如果你用了框架（比如 Vue 的 App 组件、React 的 root div）且它设置了 background: transparent，那渐变会被透过去——得检查顶层容器是否意外覆盖了背景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
