css3新增渐变（gradients）属性，可以让两个或多个指定的颜色之间显示平稳的过渡。通过使用 CSS3 渐变（gradients）替代使用图像来实现这些效果，减少下载的事件和宽带的使用，大大提高工作效率。CSS3 定义了两种类型的渐变（gradients）：1、线性渐变（Linear Gradients）：向下/向上/向左/向右/对角方向；2、径向渐变（Radial Gradients）： 由它们的中心定义；注意：渐变（gradients）的兼容性ie10支持gradients属性；chrome 、Safari、Firefox、Opera 支持替代的-webkit-渐变类型、-moz-渐变类型、-o-渐变类型属性；
工具/原料
浏览器
网页编辑器
css3线性渐变linear-gradient
1、线性渐变基本语法：background: linear-gradient(direction,color-stop1,color幻腾寂埒-stop2, ...);为了创建一个线性渐变，必须至少定义两种颜色结点。同时，也可以设置一个起点和一个方向（或一个角度）。颜色结点：要呈现平稳过渡的颜色。例子：从上到下的线性渐变，起点是橘红色（orangered），慢慢过渡到橘色（orange）；css部分（注意兼容性）：.div1{ margin:30px auto; width:300px; height:100px; color: #fff; text-align: center; line-height: 100px; background:-webkit-linear-gradient(orangered,orange); background:-o-linear-gradient(orangered,orange); background:-moz-linear-gradient(orangered,orange); background:linear-gradient(orangered,orange); }html部分：<div class="div1">从上到下的线性渐变</div>效果如图：
2、从左到右的线性渐变例子：起点是橘红色（orangered），慢慢过渡到橘色（orange）css部分：.div2{ margin:30px auto; width:300px; height:100px; color: #fff; text-align: center; line-height: 100px; background:-webkit-linear-gradient(left,orangered,orange);/* Safari 5.1 - 6.0 */ background:-o-linear-gradient(right,orangered,orange);/* Opera 11.1 - 12.0 */ background:-moz-linear-gradient(right,orangered,orange);/* Firefox 3.6 - 15 */ background:linear-gradient(to right,orangered,orange);/* 标准*/ }html部分：<div class="div2">从左到右的线性渐变</div>效果如图：
3、从左上角开始到右下角的线性渐变例子：起点是红色（orangered），慢慢过渡到深绿色（orange）css部分：.div2{ margin:30px auto; width:300px; height:100px; color: #fff; text-align: center; line-height: 100px; background:-webkit-linear-gradient(left top,red,darkslategray); background:-o-linear-gradient(bottom right,red,darkslategray); background:-moz-linear-gradient(bottom right,red,darkslategray); background:linear-gradient(to bottom right,red,darkslategray); }html部分：<div class="div3">从左上角开始到右下角的线性渐变</div>效果如图：
4、带有指定的角度的线性渐变如果要在渐变的方向上做更多的控制，可以通过定义一个角度来实现；基本语法：background: linear-gradient(angle,color1,color2);angle：即角度是指水平线和渐变线之间的角度，逆时针方向计算那么，如何在线性渐变上使用角度？例子：css部分：.div4{ margin:30px auto; width:300px; height:100px; color: #fff; text-align: center; line-height: 100px; background:-webkit-linear-gradient(180deg,red,darkslategray); background:-o-linear-gradient(180deg,red,darkslategray); background:-moz-linear-gradient(180deg,red,darkslategray); background:linear-gradient(180deg,red,darkslategray); }html部分：<div class="div4">带有指定的角度的线性渐变</div>效果如图：
