linear-gradient()必须作为background或background-image的值使用，不能用于background-color；方向参数必填且语法严格，多色停靠点需显式标注位置，否则易导致渐变失效或视觉偏差。
用 background 和 linear-gradient() 直接写 CSS 就行
不需要 JS，也不用额外图片，纯 CSS 的 linear-gradient() 是最轻量、兼容性最好的方案。现代浏览器（Chrome 10+、Firefox 16+、Safari 5.1+、Edge 12+）都支持，连 iOS Safari 也能跑。
关键点是把渐变当「颜色」用——它本质是 background 的一个取值，不是独立属性：
body {
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
}注意：linear-gradient() 必须写在 background 或 background-image 里，单独写 background-color: linear-gradient(...) 会失效。
方向参数写错会导致渐变「不按预期流动」
linear-gradient() 第一个参数控制方向，常见写法有两类，混用容易出问题：
立即学习“前端免费学习笔记（深入）”；
-
to bottom right：关键词写法，to必须带，bottom right之间有空格 -
135deg：角度写法，0deg 是正右，90deg 是正下，135deg 就是「右下」
错误示例：linear-gradient(bottom right, ...)（漏掉 to）或 linear-gradient(135, ...)（缺 deg 单位）都会让整个声明被忽略，退回到默认背景色。
多色停靠点没设好，颜色会「硬切」或「溢出」
两个颜色时浏览器自动均匀过渡；但加到 3 个以上，就得手动指定位置，否则可能某段过渡太长、某段太短：
background: linear-gradient( to right, #3498db, #2ecc71 70%, /* 绿色从 70% 位置开始 */ #e74c3c /* 红色默认占满剩余 */ );
常见陷阱：
- 百分比总和超 100%，比如
#a 30%, #b 60%, #c 50%—— 后面的会覆盖前面的停靠逻辑 - 用像素值（如
100px）在响应式页面里容易错位，优先用百分比或关键词（from/to） - 透明色写成
transparent没问题，但别写rgba(0,0,0,0)—— 某些旧 Android 浏览器解析异常
想让渐变「动起来」得加 background-size 和 animation
纯 linear-gradient() 是静态的。要实现流动效果，核心是：让渐变区域比容器大，再平移背景位置。
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
}
<p>@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}重点：
-
background-size: 400% 400%让渐变图案放大 4 倍，才有空间可「滚动」 - 动画只动
background-position，不能动background-image本身 - 旧版 Safari 需要加
-webkit-前缀，但 iOS 14+ 已基本不用了
性能上，这种纯 CSS 动画 GPU 加速友好，但别把 animation-duration 设太短（低于 3s），低端机可能掉帧。
