CSS 渐变
渐变背景
CSS 渐变允许您在两个或多个指定颜色之间显示平滑过渡。
CSS 定义了三种类型的渐变
- 线性渐变（向下/向上/向左/向右/对角线）
- 径向渐变（由其中心定义）
- 圆锥渐变（围绕中心点旋转）
CSS 线性渐变
要创建线性渐变，您必须定义至少两个颜色停止。颜色停止是您想要渲染平滑过渡的颜色。您还可以设置起始点和方向（或角度）以及渐变效果。
语法
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
方向 - 从上到下（这是默认值）
以下示例显示从顶部开始的线性渐变。它从红色开始，过渡到黄色
从上到下（默认）
方向 - 从左到右
以下示例显示从左侧开始的线性渐变。它从红色开始，过渡到黄色
从左到右
方向 - 对角线
您可以通过指定水平和垂直起始位置来创建对角线渐变。
以下示例显示从左上角开始（并过渡到右下角）的线性渐变。它从红色开始，过渡到黄色
从左上角到右下角
使用角度
如果您想要更多地控制渐变的方向，您可以定义一个角度，而不是预定义的方向（到底部、到顶部、到右边、到左边、到右下角等）。0deg 的值等效于 "to top"。90deg 的值等效于 "to right"。180deg 的值等效于 "to bottom"。
语法
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 表示完全不透明。
以下示例展示了一个从左边开始的线性渐变。它从完全透明开始，过渡到完全不透明的红色
重复线性渐变
repeating-linear-gradient() 函数用于重复线性渐变
示例
一个重复的线性渐变
#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
自己尝试 »
