CSS3 - 线性渐变色

解决方法一、

     linear-gradient()

background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */

     参数：

1、direction: 方向/ 角度
    eg: to right/ to bottom right/ to bottom / 90deg
2、colorp01, color02..........用于指定渐变的起止颜色

     eg:

background-image: linear-gradient(to right bottom, red, orange, yellow, green); /* 标准的语法（必须放在最后） */

background-image: linear-gradient(60deg, red, orange, yellow, green); /* 标准的语法（必须放在最后） */

     缺点：占用background-image属性

     -webkit-gradient

background: -webkit-gradient(linear,left top,right bottom,from(green),to(blue));
background-origin:content-box;  
background-clip: content-box;

     参数：

1、渐变色类型： linear 固定
2、x1, y1, x2,y2: 起始点/终点
    eg: left, top, right, bottom
    eg: 0, 0, 100%, 100%
    eg: 0, 0, 0, 100%
3、from(color), to(color) ：起始颜色， 终点颜色
    4、color-stop01, color-stop02：color-stop 颜色的步长，就是增加了一个渐变在50%的地方

background: -webkit-gradient(linear,left top,right bottom,from(green),to(blue),color-stop(50%,yellow));

来源：CSDN

作者：idomyway

链接：https://blog.csdn.net/idomyway/article/details/104010237