今天做东西突然用到了渐变背景色，一时间突然想不起来了，就去菜鸟教程上看了看，重新学习了一下。
CSS3 渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变，你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的。
CSS3 定义了两种类型的渐变（gradients）：
线性渐变也就是 向下/向上/向左/向右/对角方向
径向渐变也就是由它们的中心定义
我们先来学习一下线性渐变的语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);可以是多种颜色，最少是两种，要不你怎么实现渐变；
线性渐变它默认的是从上到下的变化，写一个例子：
#grad { 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); /* 标准的语法 */ }
从左到右变化的例子
#grad { 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); /* 标准的语法 */ }
对角
#grad { 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); /* 标准的语法 */ }
带有指定的角度的线性渐变：
#grad { background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(180deg, red, blue);