linear-gradient必须用于background或background-image属性，起始方向可省略（默认to bottom），颜色间需逗号分隔，停靠点须带单位，角度值比关键词更可控兼容；fallback需纯色在前、渐变在后。
linear-gradient 函数怎么写才不报错
直接写 background: linear-gradient(red, blue) 很可能被浏览器忽略——因为 linear-gradient 不是颜色值，而是图像值（<image>），必须搭配 background 或 background-image 使用，且不能单独放在 color、border 等非图像属性里。
常见错误现象：background: linear-gradient(to right, #f00, #00f); 在旧版 Safari（iOS 9.3 之前）不生效；或写了 background-color: linear-gradient(...) 导致整个声明被丢弃。
-
linear-gradient必须用在background或background-image属性中 - 起始方向参数（如
to right、45deg）不是必须的，但省略时默认是to bottom，别误以为是水平方向 - 颜色停靠点要写全单位（
0%、50px、1em），纯数字（如50）会被当成无效语法
渐变方向写 to right 还是 90deg
两者效果一样，但行为逻辑不同：to right 是语义化关键词，90deg 是标准角度值（0deg 向上，90deg 向右）。实际项目中优先用角度值，因为更可控、可计算、兼容性更好。
使用场景：做响应式渐变条时，若需配合 JS 动态旋转（比如根据滚动位置算角度），必须用数值角度；而 to bottom 这类关键词无法参与运算。
立即学习“前端免费学习笔记（深入）”；
-
to right在 IE10+ 和所有现代浏览器都支持，但 IE10 不支持to left，只认to right/to bottom等有限关键词 -
90deg在 IE10+、Edge 12+、Chrome 26+ 全面支持，且能精确到小数（89.5deg） - 别混用：写成
linear-gradient(90deg, to right, ...)会直接失效
多个颜色之间要不要加逗号、停靠点怎么设
颜色之间必须用英文逗号分隔，漏掉一个逗号就会让整条声明被浏览器跳过。停靠点（color stop）不是必须写的，但不写容易导致色带过渡生硬或意外平铺。
示例：linear-gradient(to bottom, #fff, #000) 是合法的，浏览器自动分配 0% 和 100%；但 linear-gradient(to bottom, #fff 20%, #000 80%) 才能控制深色只占中间 60% 区域。
- 两个颜色之间没逗号 → 整个
linear-gradient失效，背景回退为透明或父级颜色 - 停靠点可以是百分比（
30%）、长度（2rem）、甚至from/to（等价于0%/100%） - 同一位置写多个颜色（如
#f00 50%, #00f 50%）能实现硬边过渡，这是做分割线或卡片分界常用技巧
渐变背景和纯色背景如何安全 fallback
CSS 渐变本身不支持“降级”语法，只能靠声明顺序覆盖：把纯色写在 linear-gradient 前面，老浏览器忽略不认识的函数，就用上面那行；新浏览器解析完函数后，会用后面的声明覆盖前面的。
性能影响很小，但写错顺序会导致所有浏览器都显示纯色——比如把 background: #fff; 放在后面，那渐变永远不生效。
- 正确顺序：
background: #f0f; background: linear-gradient(to right, #f0f, #0ff); - 不要用
@supports包一层再写渐变——多数情况下没必要，反而增加维护成本 - 如果盒子有
background-image其他用途（比如叠加图标），得用background复合属性重写全部，否则渐变会和原图叠加出意外效果
最易被忽略的是：渐变作为 background-image 时，默认重复铺满（background-repeat: repeat），但你几乎不会想让它重复——记得显式写 background-repeat: no-repeat，尤其当盒子尺寸小于渐变自然跨度时。
