html本身不支持渐变色，必须用css的background-image或background配合linear-gradient()、radial-gradient()实现；需带方向参数、逗号分隔颜色，并提供background-color降级方案。
background-image 或 background 属性配合 linear-gradient()、radial-gradient() 实现。写在 HTML 标签里（比如 background-color 都无法生效。
为什么 background: linear-gradient() 有时不显示？
最常见原因是误用了简写属性覆盖了渐变，或漏掉关键语法成分：
-
background简写会清空已设的background-image—— 如果你之前写了background-image: url(...)，再写background: linear-gradient(...)就会把图片干掉，且不报错 - 方向参数不能省：写成
linear-gradient(#ff0000, #0000ff)是无效的，必须带方向，如to right或135deg - 颜色之间必须用逗号分隔：
#ff0000 #0000ff（没逗号）会被整个忽略 - IE9 及更早版本完全不支持，连前缀也无效；IE10–11 需要
-ms-linear-gradient()，且必须写在标准写法前面
怎么让渐变填满整个视口不拉伸、不重复？
默认渐变会按元素原始尺寸渲染，缩放窗口时容易“卡住”或平铺出条纹。关键不是加 no-repeat，而是锁定画布尺寸：
- 加
background-size: cover—— 它按视口等比缩放渐变区域，确保始终填满，100% 100%是按元素宽高拉伸，效果完全不同 - 必须配
background-repeat: no-repeat，否则小屏幕可能只显示左上角一截 - 慎用
background-attachment: fixed：Safari 旧版有滚动抖动 bug，先验证是否真需要视差效果 - 如果页面内容高度不足（比如只有几行文字），记得给
body或根容器设min-height: 100vh，否则渐变只在内容区渲染
radial-gradient() 圆心定位总失效？检查 at 关键字和单位
radial-gradient() 默认从 center 发散，但一旦想偏移，语法容错率极低：
- 位置必须带
at关键字：radial-gradient(circle at top left, #fff, #000)✅；radial-gradient(circle top left, ...)❌（缺at） - 关键词之间不能加逗号：
at top, left会直接失效，正确是at top left - 数值坐标必须带单位：
at 20px 30px✅，at 20 30❌（浏览器当无效声明跳过） - 老版 Safari 对
transparent支持不稳定，建议用rgba(0,0,0,0)替代
渐变做边框时 background-clip 必须配 padding
border 属性本身不接受渐变，所谓“渐变边框”本质是把渐变画在内边距区域，再裁剪+遮盖：
- 必须设
padding（如padding: 2px），否则没空间画渐变 - 必须加
background-clip: padding-box，否则渐变会铺满 border 区域下方，看起来像溢出 - 外层用纯色
border盖住非 padding 区域，形成视觉边框；别碰border-image—— Firefox 不支持border-image-source: linear-gradient() - 圆角容器（
border-radius）下，还要加background-origin: padding-box防边缘发虚
background-size: cover 的组合 —— 没它，渐变在移动端横屏或小分辨率下大概率只显示起点色；没 fallback，IE8 用户看到的就是空白背景。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
