CSS 渐变背景 之 线性渐变 linear-gradient

CSS 渐变 可以显示两种或多种指定颜色之间的平滑过渡。

CSS 定义了两种渐变类型：

• 线性渐变（向下/向上/向左/向右/对角线）
• 径向渐变（由其中心定义）

这里先讲线性渐变

线性渐变

语法：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

线性渐变 - 从上到下（默认）

下面的例子显示了从顶部开始的线性渐变。它从红色开始，过渡到黄色：

#grad {
  background-image: linear-gradient(red, yellow);
}

线性渐变 - 从左到右

下面的例子展示了从左开始的线性渐变。它从红色开始，过渡到黄色：