CSS 渐变
渐变背景
CSS 渐变允许您在两个或多个指定的颜色之间显示平滑的过渡。
CSS 定义了三种类型的渐变
- 线性渐变（从上/下/左/右/对角线方向）
- 径向渐变（由中心定义）
- 锥形渐变（围绕中心点旋转）
CSS 线性渐变
要创建线性渐变，您必须定义至少两个颜色停止点。颜色停止点是您想要平滑过渡的颜色。您还可以设置渐变效果的起始点和方向（或角度）。
语法
background-image: linear-gradient(方向, 颜色停止点1, 颜色停止点2, ...);
方向 - 从上到下（这是默认值）
下面的示例显示了一个从顶部开始的线性渐变。它从红色开始，过渡到黄色
从上到下（默认）
方向 - 从左到右
下面的示例显示了一个从左侧开始的线性渐变。它从红色开始，过渡到黄色
从左到右
方向 - 对角线
通过指定水平和垂直起始位置，您可以创建对角线渐变。
下面的示例显示了一个从左上角开始（到右下角结束）的线性渐变。它从红色开始，过渡到黄色
从左上到右下
使用角度
如果您想更精确地控制渐变方向，可以使用角度代替预定义的（从下到上，从上到下，从左到右，从右到左，从左下到右上等）方向。0deg 等同于“到顶部”。90deg 等同于“到右边”。180deg 等同于“到底部”。
语法
background-image: linear-gradient(角度, 颜色停止点1, 颜色停止点2);
下面的示例演示了如何在线性渐变中使用角度
180deg
使用多个颜色停止点
下面的示例显示了一个带有多个颜色停止点的线性渐变（从上到下）
下面的示例展示了如何创建彩虹色和一些文本的线性渐变（从左到右）
彩虹背景
示例
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
自己动手试一试 »
使用透明度
CSS 渐变也支持透明度，可用于创建淡入淡出效果。
要添加透明度，我们使用 rgba() 函数来定义颜色停止点。rgba() 函数中的最后一个参数可以是 0 到 1 之间的值，它定义了颜色的透明度：0 表示完全透明，1 表示全色（无透明度）。
下面的示例显示了一个从左侧开始的线性渐变。它从完全透明开始，过渡到全红
示例
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
自己动手试一试 »
重复 linear-gradient
repeating-linear-gradient() 函数用于重复线性渐变
示例
重复的线性渐变
#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
自己动手试一试 »
