正确写法是background-image: linear-gradient()，所有渐变均通过该属性配合函数实现；常用linear-gradient()，需注意避免误用background简写覆盖子属性，推荐显式声明并合理设置background-size与background-position以支持动画。
background-image: linear-gradient() 是设置渐变背景的正确写法
CSS 中没有叫 gradient 或 background-gradient 的独立属性，所有渐变都必须通过 background-image 配合函数实现。最常用的是 linear-gradient()，它接受方向和颜色停止点两个核心参数。
常见错误是写成 background: linear-gradient(...) —— 这看似能用，实则隐式覆盖了 background-color、background-position 等其他子属性，容易导致意外交互问题（比如后续想单独改背景色却失效）。
- 推荐显式写法：
background-image: linear-gradient(135deg, #ff6b6b, #4ecdc4); - 若需叠加纯色底或图片，用逗号分隔：
background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url(bg.jpg); - 方向可写度数（
45deg）、关键字（to right、to bottom），注意to right等价于90deg，但语义更清晰
transition 无法直接过渡 background-image，需配合 background-position 或伪元素
想让渐变“动起来”，比如悬停时颜色滑动或旋转，不能对 background-image 做 transition —— 浏览器不支持该属性的过渡动画，强行写也不会生效。
真正可行的方案有两个：
立即学习“前端免费学习笔记（深入）”；
- 用
background-position移动渐变起点：给linear-gradient设置足够宽的色带（如background-size: 200% 200%;），再用background-position控制显示区域，配合transition: background-position 0.3s; - 用伪元素叠加一层可动画的渐变层：
::before绘制渐变并设opacity或transform，主元素保持静态背景 - 注意：Safari 对
background-position过渡的支持较晚（iOS 13.4+），旧版本需降级为 transform 方案
径向渐变和重复渐变用 radial-gradient() 和 repeating-linear-gradient()
除了线性渐变，radial-gradient() 可创建圆形/椭圆扩散效果，参数顺序是：形状（circle / ellipse）、尺寸（closest-side）、圆心位置、颜色停止点。
repeating-linear-gradient() 适合做条纹、网格等规律图案，原理是让颜色段首尾相接自动平铺，例如：
background-image: repeating-linear-gradient( 45deg, #ff6b6b, #ff6b6b 10px, #4ecdc4 10px, #4ecdc4 20px );
关键点在于：相邻颜色段的结束位置与下一段起始位置必须严格一致（如 #ff6b6b 10px 和 #4ecdc4 10px），否则会出现空隙或重叠。
兼容性与性能要注意 fallback 和硬件加速
IE10+ 支持标准语法，但 IE 低版本需用 filter: progid:DXImageTransform.Microsoft.gradient(...)（已基本淘汰）。现代项目只需加一行 background-color 作为降级色：
-
background-color: #4ecdc4;—— 渐变加载失败或不支持时兜底 - 避免在大量元素上同时启用渐变动画，尤其是
background-position过渡，可能触发频繁重绘；优先用transform或opacity动画 - 移动端注意渐变层级过高时的内存占用，Safari 对复杂渐变渲染略慢，可适当降低
background-size值
渐变本身不难，但动效和兼容组合起来容易漏掉某个边界条件——比如忘了设 background-size 就去调 background-position，或者在 flex 容器里用伪元素渐变时没设 position: relative。这些细节比语法本身更影响最终效果。
