linear-gradient 必须用于 background 或 background-image，不可用于 background-color；方向参数中 to top 等价于 180deg 而非 0deg；多色停靠点需显式设置位置以精准控制过渡；需为旧浏览器提供 fallback。
linear-gradient 本身不支持直接写成 background-color 的值，必须用在 background 或 background-image 上；写错位置会完全失效。
linear-gradient 必须作为 background-image 使用
很多人尝试写 background-color: linear-gradient(...)，结果背景没变化——因为 linear-gradient() 是一个图像生成函数，属于 background-image 的取值范围，不是 background-color 的合法值。
- ✅ 正确写法：
background: linear-gradient(to right, #ff6b6b, #4ecdc4);（background是复合属性，会自动识别并设为background-image） - ✅ 或显式写：
background-image: linear-gradient(135deg, #3498db, #9b59b6); - ❌ 错误写法：
background-color: linear-gradient(...);（浏览器忽略该声明）
方向参数容易混淆：to top 和 0deg 不等价
方向写法有两种风格，但语义不同，混用会导致渐变旋转出乎意料。
-
to top表示“颜色从下往上过渡”，等价于180deg，不是0deg -
to right=90deg，to bottom=0deg，to left=270deg - 用角度时注意：CSS 中 0deg 默认指向上方，而多数人直觉认为 0deg 是向右——这是最常调错的点
- 推荐新手优先用
to xxx写法，更直观；调试时可用 DevTools 实时改角度观察变化
多色停靠点（color stop）的位置控制很关键
不写位置时浏览器自动均分，但真实设计中往往需要强调某段色彩过渡，这时必须显式指定百分比或长度。
- 例如：
linear-gradient(to right, #f00, #ff0 70%, #0f0)—— 黄色停在 70% 处，绿色从那里开始过渡 - 两个相邻停靠点位置相同时（如
#f00 50%, #00f 50%），会产生硬边切换，适合做分界线效果 - 避免写
0% 100%这类冗余标注，除非要覆盖默认分布逻辑 - 使用
rem、px等长度单位也可，但需注意容器尺寸变化时是否仍符合预期
兼容性与 fallback 要主动处理
IE10+ 支持标准 linear-gradient()，但 IE9 及更早版本完全不支持；而且旧版 Safari（-webkit-linear-gradient 前缀。
- 现代项目可忽略 IE9，但若需兼容 IE10/11，确保没有用到
color-stop()等已废弃语法 - 安全写法是叠加 fallback：
background-color: #333; background-image: linear-gradient(...);—— 旧浏览器退回到纯色 - 不要依赖 Autoprefixer 自动加前缀：它对
linear-gradient的处理有局限，特别是涉及老语法时 - 渐变本身无性能问题，但若在滚动区域频繁重绘（如配合
position: sticky），要注意硬件加速是否触发
真正难的不是写对第一行渐变，而是当它嵌在复杂布局里、被 transform 缩放、或和 backdrop-filter 叠加时，颜色过渡是否还符合视觉预期——这时候得靠眼力+实时调试，而不是背参数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
