HTML不支持渐变背景，必须用CSS的background-image或background配合linear-gradient()、radial-gradient()实现；linear-gradient()需带方向参数（to right或45deg等），radial-gradient()圆心位置须带at关键字；background-image比background更安全，多层渐变需用逗号分隔；旧版IE需手动添加前缀和fallback色；文字可读性需实测渐变中间段对比度。
HTML 本身不支持渐变背景，所有渐变效果必须通过 CSS 的 background-image 或 background 属性配合 linear-gradient()、radial-gradient() 实现；漏写方向、单位或逗号，整条声明就会静默失效。
linear-gradient() 必须带方向参数和单位
方向不能只写 right 或 bottom，必须用 to right、to bottom 等完整关键词，或明确角度如 45deg（45 不加 deg 单位会被忽略）。角度默认是 to bottom（即 180deg），不是从左到右的 0deg。
-
background: linear-gradient(to right, #ff6b6b, #4ecdc4);—— 安全，关键词写法 -
background: linear-gradient(135deg, #6a11cb, #2575fc);—— 安全，角度写法，单位不可省 - 错误示例：
background: linear-gradient(right, #fff, #000);→ 无效，浏览器回退为透明 - 错误示例：
background: linear-gradient(90, #fff, #000);→ 无效，缺deg
radial-gradient() 圆心位置必须带 at 关键字
只要指定位置，就必须显式写 at；不写 at 时默认是 at center，但一旦写了坐标或方位词，漏掉 at 就整个函数失效。形状关键字（circle / ellipse）可选，但建议显式写出，避免不同浏览器默认行为差异。
-
background: radial-gradient(circle at 20px 30px, #ff9a9e, #fad0c4);—— 正确，像素定位 -
background: radial-gradient(ellipse at top right, #6a11cb, #2575fc);—— 正确，方位词组合 - 错误示例：
background: radial-gradient(circle top right, #fff, #000);→ 缺at，无效 - 错误示例：
background: radial-gradient(at 20% 30%, #fff, #000);→ 缺形状或默认ellipse，但部分旧 WebView 渲染偏移
background-image 比 background 更安全
用 background 简写会清空 background-color、background-position 等已有值；而 background-image 只控制图像层，便于叠加 fallback 色或图片。多层渐变（如径向+线性）也必须用 background-image 并以逗号分隔。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
background-color: #ff9a9e; background-image: linear-gradient(135deg, #ff9a9e, #fad0c4); - 多层示例：
background-image: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%), linear-gradient(135deg, #ff9a9e, #2575fc); - 别写：
background: linear-gradient(...); background-color: #xxx;→ 后者会被前者覆盖 - 移动端 Safari 旧版（iOS 9 及更早）需补
-webkit-linear-gradient()前缀
IE 兼容和降级 fallback 必须手动写
IE9 及以下完全不支持渐变，连前缀都不认；IE10–11 只支持 -ms-linear-gradient()，且不支持 rgba() 透明色。fallback 色必须写在最前面，顺序不能错，否则老 IE 会直接跳过整块样式。
- 正确顺序：
background: #ff9a9e; background: -ms-linear-gradient(135deg, #ff9a9e, #fad0c4); background: linear-gradient(135deg, #ff9a9e, #fad0c4); - IE10 中若用了
rgba(0,0,0,0.3)，会被忽略，只能换浅灰或 hsla 近似替代 - Autoprefixer 默认不加
-ms-前缀，需单独配置或手写 - 别依赖
background-size: cover在 IE 中生效——它在 IE9–10 下被忽略，得靠固定高宽或 JS 补偿
最容易被忽略的是：渐变作为背景时，文字可读性会随颜色过渡剧烈变化；不要只测起点和终点的对比度，中间段（比如 50% 位置）很可能灰蒙蒙看不清，得用 DevTools 的 Contrast 工具实测任意区域。
