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>css渐变
原文地址：https://www.cnblogs.com/alasijia/p/9223492.html