利用CSS3 gradient（渐变）函数实现渐变背景

CSS3 规范定义了两种类型的渐变，分别是线性渐变（linear-gradient）、径向渐变（radial-gradient）。在这之前要实现渐变背景的效果，通常需要用图片来实现。

CSS3 渐变背景在现代浏览器中基本得到了很好的实现，在 IE10 以上版本也得到了支持。而在低版本浏览器中需要添加 -webkit-、-moz- 或 -o- 前缀才能实现渐变的效果。

CSS3 线性渐变（linear-gradient）

默认从上到下渐变：

.box {
  background-image: -webkit-linear-gradient(red, blue);
  background-image: -o-linear-gradient(red, blue);
  background-image: -moz-linear-gradient(red, blue);
  background-image: linear-gradient(red, blue);
}

上面的示例代码实现了从上到下，从红到蓝慢慢过渡渐变的效果，实际上在前缀写法中省略了第一个参数（top），在标准写法中省略了第一个参数（to bottom）。

从左到右渐变：

.box {
  background-image: -webkit-linear-gradient(left, red, blue);
  background-image: -o-linear-gradient(left, red, blue);
  background-image: -moz-linear-gradient(left, red, blue);
  background-image: linear-gradient(to right, red, blue);
}

上面的示例代码实现了从左到右，从红到蓝慢慢过渡渐变的效果。

从左上角到右下角渐变：

.box {
  background-image: -webkit-linear-gradient(left top, red, blue);
  background-image: -o-linear-gradient(left top, red, blue);
  background-image: -moz-linear-gradient(left top, red, blue);
  background-image: linear-gradient(to right bottom, red, blue);
}

上面的示例代码实现了从左上角到右下角，从红到蓝慢慢过渡渐变的效果。

一定角度渐变：

.box {
  background-image: -webkit-linear-gradient(60deg, red, blue);
  background-image: -o-linear-gradient(60deg, red, blue);
  background-image: -moz-linear-gradient(60deg, red, blue);
  background-image: linear-gradient(30deg, red, blue);
}

上面的示例代码实现了以左下角为起点，向与底边呈30度角的方向，从红到蓝慢慢过渡渐变的效果。

说明：根据 CSS3 标准，0deg 表现为从下到上渐变，90deg 是从左到右渐变。顺时针方向角度递增，逆时针方向角度递减。而按旧标准，0deg 表现为从左到右渐变，90deg 是从下到上渐变。逆时针方向角度递增，顺时针方向角度递减。

前缀写法使用旧标准，与标准写法的换算关系是 90 – x = y。

多个颜色渐变：

.box {
  background-image: -webkit-linear-gradient(red, green, pink, yellow, blue);
  background-image: -o-linear-gradient(red, green, pink, yellow, blue);
  background-image: -moz-linear-gradient(red, green, pink, yellow, blue);
  background-image: linear-gradient(red, green, pink, yellow, blue);
}

上面的示例代码实现了从上到下，从红、绿、粉、黄、蓝依次慢慢过渡渐变的效果。

透明度渐变：

.box {
  background-image: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));
  background-image: -o-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));
  background-image: -moz-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

上面的示例代码实现了从左到右，从完全透明慢慢过渡渐变到完全不透明的红色的效果。

CSS3 径向渐变（radial-gradient）

从中心到四周渐变，默认呈椭圆：

.box {
  background-image: -webkit-radial-gradient(red, blue);
  background-image: -o-radial-gradient(red, blue);
  background-image: -moz-radial-gradient(red, blue);
  background-image: radial-gradient(red, blue);
}

上面的示例代码实现了从中心到四周呈椭圆形，从红到蓝慢慢过渡渐变的效果。实际上省略第一个默认参数（形状），即椭圆（ellipse）。

从中心到四周渐变，呈圆形：

.box {
  background-image: -webkit-radial-gradient(circle，red, blue);
  background-image: -o-radial-gradient(circle，red, blue);
  background-image: -moz-radial-gradient(circle，red, blue);
  background-image: radial-gradient(circle，red, blue);
}

上面的示例代码实现了从中心到四周呈圆形，从红到蓝慢慢过渡渐变的效果。