css中linear-gradient的百分比属性

1.先写一个最简单的渐变，默认从上到下。颜色从red 到blue
background: linear-gradient(red, blue);
其实这条代码是个简写，完整的写法是
background: linear-gradient(red 0%, blue 100%);

加上这个百分比后图片没有任何变化。

2.现在我们改变每个颜色的百分比
background: linear-gradient(red 20%, blue 80%);
可以看出，距离顶端20%的位置是一条红色基线，距离顶端80%的位置是一条蓝色基线。在20%到80%之间就是我们的红色到蓝色过渡区域。那么0%到20%之间其实就是省略掉的red0%到red20%，即红色到红色的过渡区域，当然变成了红色的实色，没有渐变。同理剩下的blue80%-blue100%也就变成了蓝色的实色。
重写一下代码
background: linear-gradient(red 0%, red 20%, blue 80%, blue 100%);
图片没有改变。

3.验证一下，我们再加入一个颜色yellow,让它的基线位于距顶端50%处。
background: linear-gradient( red 20%, yellow 50%, blue 80%);
现在应该是
0%-20%：红色-红色的实色；
20%-50%：红色-黄色的渐变色；
50%-80%：黄色-蓝色的渐变色；
80%-100%：蓝色-蓝色的实色。

4.利用百分比可以轻松做出彩色条纹，只要让两个不同颜色的基线之间没有缝隙就不会出现渐变色。
background: linear-gradient( red 50%, blue 50%);

background: linear-gradient( red 33.33%, yellow 33.33%, yellow 66.66%, blue 66.66%);