css3 线性渐变和径向渐变

在网页中，经常会用的背景渐变的效果。以前都是用背景图片去实现。但是css3很好的实现了这一效果。
渐变分为线性渐变和径向渐变两种。线性渐变又分为从上到下渐变，从左到右渐变，对角线渐变。
1、从上到下线性渐变

 background: linear-gradient(red, blue); 

实现效果：

需要注意的是ie9及以前的版本不支持渐变。在这里。我们为了兼容其他的浏览器，需要这样写：

background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, blue); /*必须写在最后面*/

2、从左到右渐变：

 background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red , blue); /* 标准的语法 */

3、对角线渐变

background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom right, red , blue); /* 标准的语法（必须放在最后） */

4、径向渐变
径向渐变是从中心开始向外扩散的渐变。

background: radial-gradient(circle, red, blue, pink);

运行结果：