linear-gradient() 实现CSS背景渐变需指定方向（如to right、135deg）和颜色停靠点（可加%或长度值），支持多层叠加、透明度及降级色。
用 linear-gradient() 实现 CSS 背景渐变，核心是设置方向和颜色停靠点。
基础语法：方向 + 颜色序列
最简写法：background: linear-gradient(to right, #ff9a9e, #fad0c4);
其中 to right 表示从左到右渐变；也可用角度（如 45deg）或关键词（to bottom、to top left）。
控制渐变方向的几种写法
-
to right：左→右（等价于90deg） -
to bottom：上→下（等价于180deg） -
to bottom right：左上→右下（约45deg） -
135deg：从左下角向右上角延伸
自定义颜色停靠位置（更精细控制）
可在颜色后加百分比或长度值，指定该色出现在哪一位置：background: linear-gradient(to right, #6a11cb 0%, #2575fc 50%, #00c9ff 100%);
也可以不写起始/结束位置，浏览器自动均匀分布。
实用小技巧
- 多个渐变可叠加，用逗号分隔：
background: linear-gradient(...), linear-gradient(...); - 配合
background-size和background-repeat做重复条纹效果 - 透明度支持：用
rgba(255, 0, 0, 0.5)或hsla()实现半透渐变 - 别忘了加
background-color作降级兜底（旧浏览器不支持渐变时显示单色）
不复杂但容易忽略细节，写对方向和颜色位置，渐变就自然出来了。
