css linear-gradient 线性渐变

语法：

<linear-gradient>：linear-gradient([<point>,]?<color-stop>[,<color-stop>]+);

<point>：[ left | right ]? [ top | bottom ]? ||<angle>?

<color-stop>：<color>[<length>|<percentage>]?

渐变夹角为元素中心点垂直线与渐变线之间形成的夹角

线性渐变是通过轴线定义的

线性渐变  默认从上往下 （to bottom）  示例：

示例

code

角度值与方向值的转换：

示例

关于渐变中的百分比：

background: linear-gradient(green, red)

上图 可以看出未设置颜色百分比的情况下 两个颜色着色区域都相当 渐变模糊区域也是沿高度对半划分

background: linear-gradient(green 20%, red 50%)

上图 可以看出设置了渐变的百分比 第一个颜色参数是沿顶部0开始着色20%  第二个颜色参数为50% 是沿顶部50%的处开始着色 渐变区域为50%-20%=30%  

background: linear-gradient(green 50%, red 40%)

上图可以看出 当后面的颜色参数百分比 小于前一个参数颜色百分比的时候 将默认前一个百分比并开始着色 相当于 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大小 
例如 

width: 50px; height: 50px;

上图设置： background-size：25px 25px