Saber2pr's Blog

线性渐变

linear-gradient

一个 css 函数,用于生成类似图片的效果。

生成<gradient>数据类型,是一种特别的<image>数据类型

参数格式:

linear-gradient(direction,...colors)

示例:

#demo1 {
  background-image: linear-gradient(to right, red, blue);
}

元素的背景图为从左到右、从红到蓝的渐变色。

direction 也可以是角度(deg),如 linear-gradient(45deg, red, blue)

颜色还可以指定起始位置,例如:

#demo2 {
  background-image: linear-gradient(to right, red, blue 50%);
}

表示 blue 从 50%的位置开始。