CSS3线性渐变

  moz颜色渐变语句

    -moz-linear-gradient( [ <point> || <angle>,]? <stop>, <stop> [, <stop>]* ); 即:  -moz-linear-gradient(top, red, blue);    
其中top可以理解为正上方的一个点point,写为50% 0,-moz-linear-gradient(50% 0 , red, blue);也可以 理解为一个角度angle,写为-90deg, -moz-linear-gradient(-90deg, red, blue);
这两句与上面那句实现的效果是一样的; 后面两个颜色值可以用red, 也可以用十六进制#f00写法,表示起始颜色与结束颜色;
webkit颜色渐变语句: -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*); 即: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
其中linear表示线性渐变,与moz不同的是它写在了函数里面,不过webkit又对其进行修改,可以跟moz一样写在外面:-webkit-linear-gradient(top, red, blue); 其实我觉得旧的写法条理很清晰,而且可以定终端的点,
上面的linear表示类型,是线性的渐变(可以是放射性radial),(0 0)表示左上角为起点(注:可用left top代替),(0 100%)表示左下角为终点(注:可用left bottom代替) ,然后从red颜色过渡到blue颜
  IE渐变:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000')"; 
  
原文地址:https://www.cnblogs.com/yanypan/p/2590675.html