css3背景渐变

CSS3 背景渐变可以使用 linear-gradient() 创建线性渐变或者 radial-gradient() 创建径向渐变。

线性渐变：




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

径向渐变：




.radial-gradient {
  background: radial-gradient(shape size at position, start-color, ..., last-color);
}

例子：

线性渐变从上到下，从红色到蓝色：




div {
  height: 100px;
  background: linear-gradient(to bottom, red, blue);
}

径向渐变从中心开始，由蓝色向透明色过渡：




div {
  height: 100px;
  background: radial-gradient(circle at center, blue, transparent);
}