使用CSS渐变

使用CSS 渐变 是在 CSS3 Image Module 中新增加的 类型. 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果. 用它代替图片，可以加快页面的载入时间、减小带宽占用。同时，因为渐变是由浏览器直接生成的，它在页面缩放时的效果比图片更好，因此你可以更加灵活、便捷的调整页面布局。

浏览器支持两种类型的渐变：线性渐变 (linear)，通过 linear-gradient 函数定义，以及 径向渐变 (radial)，通过 radial-gradient 函数定义.

线性渐变

为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。

简单线性渐变

这里是一个线性渐变从中间（水平方向）和顶部（垂直方向）开始，起始于蓝色，过渡到白色.

/* 旧语法，带前缀并且已经废弃，以支持老版本的浏览器 */
background: -prefix-linear-zgradient(top, blue, white); 

/* 新语法，不带前缀，以支持标准兼容的浏览器（Opera 12.1， IE 10， Firefox 16， Chrome 26， Safari 6.1） */
background: linear-gradient(to bottom, blue, white);

改变相同的渐变从左到右运行:

/* 新语法，不带前缀，以支持标准兼容的浏览器（Opera 12.1， IE 10， Firefox 16， Chrome 26， Safari 6.1） */
background: linear-gradient(to right, blue, white);

可以同时指定水平方向和垂直方向的起始点使渐变对角线式的运行:

/* 新语法，不带前缀，以支持标准兼容的浏览器（Opera 12.1， IE 10， Firefox 16， Chrome 26， Safari 6.1） */
background: linear-gradient(to bottom right, blue, white);

使用角度

如果你不指定一个角度，这个将自动基于给定的方向。如果你更喜欢控制渐变的方向，你可以设置特定的角度。

例如，这两个渐变，第一个方向朝右，第二个有个70度的角。

右边的这个使用的是这样的CSS样式：

background: linear-gradient(70deg, black, white);

色标

linear-grandient可以填写多于两个颜色，这样可以形成多个颜色的渐变。默认情况下每个颜色都占均等的宽度，但在颜色后面可以指定一个从0-100的百分数，来指定当前颜色的渐变位置。第一个颜色的位置默认为0， 最后一个默认为100

background: linear-gradient(to right, red, blue 20%,black);

透明和渐变

渐变是支持透明度的。 举个例子，当你叠加多个背景层，你可以使用这个在背景图片上来创建淡入淡出的效果 :

background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);

径向渐变

径向渐变使用 radial-gradient 函数语法. 这个语法和线性渐变很类似, 除了你可以指定渐变结束时的形状 (可能时一个圆形或者一个椭圆形) 以及它的大小. 默认来说，结束形状是一个椭圆形并且和容器的大小比例保持一致。

background: radial-gradient(red, yellow, rgb(30, 144, 255));

重复的渐变

linear-gradient 和 radial-gradient不支持自动重复的色标。然而， repeating-linear-gradient 和 repeating-radial-gradient 可以实现这个功能。

background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);

参考文档

Demo