css背景渐变怎么实现_使用linear gradient属性

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 作降级兜底（旧浏览器不支持渐变时显示单色）

不复杂但容易忽略细节，写对方向和颜色位置，渐变就自然出来了。