直接在仪表盘容器上使用background-image: linear-gradient()即可实现渐变背景，但需设min-height: 100vh确保铺满视口，用to right或to bottom等语义方向替代角度，配合background-size: cover和background-repeat: no-repeat防止错位与拉伸，并添加background-clip: padding-box解决圆角发虚问题；SVG内部渐变须单独定义于中并引用，不可复用CSS渐变。
直接给仪表盘容器加 background-image: linear-gradient() 就能生效，但多数人卡在铺不满、颜色错位、被子元素盖住这三步上。
仪表盘根容器必须设 height: 100vh 或 min-height: 100vh
渐变不会自动撑满视口——它只渲染容器内容高度。如果仪表盘用 <div id="dashboard"> 包裹，而内部只是几行卡片，没内容撑高，渐变就只占一屏顶部几像素。
<ul>
<li>给 <code>#dashboard 或 body 加 min-height: 100vh（比 height: 100vh 更稳妥，兼容滚动内容）
height: 100%：它依赖父级高度，而 html 和 body 默认没高度，会失效align-content: start 之类拉回顶部渐变写在 body 上还是仪表盘 div 上？
优先写在仪表盘专属容器（如 #dashboard）上，而不是 body。原因很实际：
-
body上的渐变会被所有浮动/绝对定位子元素穿透——比如悬浮的告警弹窗、SVG 指针图层，它们背景透明时，底下渐变会透上来干扰阅读 - 仪表盘常需深色模式切换，单独控制容器背景更灵活，不用重写整页
body样式 - 若仪表盘嵌在后台系统里（比如作为 iframe 或子路由），
body可能属于外壳框架，动它会影响全局
linear-gradient() 参数调不对，颜色总“偏移”或“拉伸变形”
常见现象：渐变从左上角开始，但仪表盘是横宽型布局，结果蓝色全堆在左上，右下一片苍白；或者缩放窗口后颜色断层、重复出现条纹。
立即学习“前端免费学习笔记（深入）”；
- 方向别硬写角度，用语义值更稳：
to right（适合横向仪表盘）、to bottom（适合竖排指标区） - 加
background-size: cover，否则默认按容器原始尺寸平铺，缩放时颜色区域不动，视觉卡顿 - 禁用
background-repeat：渐变不是纹理，no-repeat是必须项 - 如果仪表盘有圆角（
border-radius），加background-clip: padding-box，否则渐变会画到圆角外侧，边缘发虚
SVG 仪表盘组件里的渐变怎么同步？
纯 CSS 渐变设在容器上，不影响内部 SVG 元素。如果你用 <path></path> 画速度弧线、电池电量条，它们的描边（stroke）要单独配渐变，不能指望外层 CSS。
- 在 SVG 的
<defs></defs>里定义<lineargradient></lineargradient>，ID 记得唯一（如id="speed-gradient"） -
<path stroke="url(#speed-gradient)"></path>才能生效，写成stroke: linear-gradient(...)是无效的 - SVG 渐变坐标系独立，
x1="0%" y1="0%" x2="100%" y2="0%"对应水平方向，别套用 CSS 的to right - 如果 SVG 是响应式缩放（
viewBox），渐变也会跟着缩，无需额外处理尺寸
最容易被忽略的是：渐变背景和 SVG 图形描边渐变是两套系统，必须分别配置；还有就是圆角容器不加 background-clip: padding-box，边缘一定发虚——这点在科技感仪表盘里特别显眼。
