css渐变
渐变（gradients）可以在两个或多个指定的颜色之间显示平稳的过渡（过渡是指颜色的过度）
兼容性
IE chrome FireFox Safari Opera
10+ 26+ 16+ 6.1+ 12.1+
10.0-webkit- 3.6 -moz- 5.1 -webkit- 11.6 -0-
线性渐变（Linear Gradients）属性
是沿一根轴线改变颜色，从起点到终点颜色进行顺序渐变（从一边拉向另一边）
语法：background:linear-gradient(direction,color-stop1,color-stop2,...);
线性渐变-从上到下（默认）--不需要指定方向
语法：background:linear-gradient(color-stop1,color-stop2,...);
线性渐变-从做到右
background: -webkit-linear-gradient( begin-direction,red,blue,greenyellow);
background: -moz-linear-gradient( end-direction,red,blue,greenyellow);
background: -o-linear-gradient( end-direction,red,blue,greenyellow);
background: linear-gradient(to end-direction,red,blue,greenyellow);（标准写法）
注：随着浏览器版本不断更新，兼容性也会有所变化，并会越来越好，
如：-moz-linear-gradient在火狐3.6-15版本中，方向指目标防线，新版指开始方向，
并兼容了渐变的标准写法，所以建议用标准写法
线性渐变-对角
background: -webkit-linear-gradient(begin-level begin-vertical,red,blue,greenyellow);
background: -moz-linear-gradient( end-level end-vertical,red,blue,greenyellow);
background: -o-linear-gradient( end-level end-vertical,red,blue,greenyellow);
background: linear-gradient( to end-level end-vertical,red,blue,greenyellow);（标准写法）
线性渐变-使用角度
语法：background:linear-gradient(angle,color-stop1,color-stop2,...);
角度说明 0deg 从下到上的渐变 90deg从做到右
线性渐变-颜色结点
background:linear-gradient(color1 length|percentage,
color2 length|percentage,
......
);
/*10%是纯红色，从10%到15%从红色渐变成橘色，最后一个如果是90%，那么从90%到100%之间就是纯粹的violet色，
因为indigo 80%violet需要大于80%才会有渐变效果*/
/*注：最后一个颜色如果不写默认是100%，第一个颜色如果不写默认是0%*/
background: -webkit-linear-gradient(90deg,red 10%,orange 15%,yellow 20%,green 50%,blue 70%,indigo 80%,violet 100%);
background: -moz-linear-gradient(90deg,red 10%,orange 15%,yellow 20%,green 50%,blue 70%,indigo 80%,violet 100%);
background: -o-linear-gradient(90deg,red 10%,orange 15%,yellow 20%,green 50%,blue 70%,indigo 80%,violet 100%);
background: linear-gradient(90deg,red 10%,orange 15%,yellow 20%,green 50%,blue 70%,indigo 80%,violet 100%);
透明渐变
/*rgba第四个值是阿尔法值，如果是0，代表透明度为0，如果是1，透明度100%*/
/*第二个rgba代表位置到50%，透明度达到90%*/
background: -webkit-linear-gradient(90deg,rgba(255,0,0,0),rgba(255,0,0,.9),rgba(255,0,0,1));
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>线性渐变-从上到下（默认情况）</title> <style type="text/css"> div{ width: 500px; height: 300px; /*从上到下*/ /*background: -webkit-linear-gradient(red,blue,greenyellow);*/ /*background: -moz-linear-gradient(red,blue,greenyellow);*/ /*background: -o-linear-gradient(red,blue,greenyellow);*/ /*background: linear-gradient(red,blue,greenyellow);*/ /*从左到右*/ /*background: -webkit-linear-gradient( left,red,blue,greenyellow);*/ /*background: -moz-linear-gradient( right,red,blue,greenyellow);*/ /*background: -o-linear-gradient( right,red,blue,greenyellow);*/ /*background: linear-gradient(to right,red,blue,greenyellow);*/ /*对角线*/ background: -webkit-linear-gradient( left top,red,blue,greenyellow); background: -moz-linear-gradient( right bottom,red,blue,greenyellow); background: -o-linear-gradient( right bottom,red,blue,greenyellow); background: linear-gradient(to right bottom,red,blue,greenyellow); } </style> </head> <body> <div></div> </body> </html>