语法：
<linear-gradient>：linear-gradient([<point>,]?<color-stop>[,<color-stop>]+);
<point>：[ left | right ]? [ top | bottom ]? ||<angle>?
<color-stop>：<color>[<length>|<percentage>]?
线性渐变 默认从上往下 （to bottom） 示例：
角度值与方向值的转换：
关于渐变中的百分比：
上图 可以看出未设置颜色百分比的情况下 两个颜色着色区域都相当 渐变模糊区域也是沿高度对半划分
上图 可以看出设置了渐变的百分比 第一个颜色参数是沿顶部0开始着色20% 第二个颜色参数为50% 是沿顶部50%的处开始着色 渐变区域为50%-20%=30%
上图可以看出 当后面的颜色参数百分比 小于前一个参数颜色百分比的时候 将默认前一个百分比并开始着色 相当于 linear-gradient(green 50%, red 50%) 就没有渐变区域了
应用场景：
思路：设置卡片的背景图片 因linear-gradient 是background-image的属性（这里和卡片背景冲突）所以用伪元素设置一个长宽和卡片容器一样的盒子 并设置其background-image属性为linear-gradient(to bottom right,transparent 90%,red 10%)；最后将“vip”定位到卡片容器位置即可
思路：设置进度条深色背景色 并设置linear-gradient 为浅色与透明色的隔断渐变 再用animation 与 @keyframes 设置动画过渡
思路：采用repeating-linear-gradient 再指定background-size大小
例如
上图设置： background-size：25px 25px
