css渐变色linear-gradient起止点

讲渐变方向的帖子很多，这里不啰嗦，只说起止点的设置及含义

也就是分析这句css代码的含义：

位置也可以用百分比，我这里为了搞清楚具体每一像素的颜色，所以用像素指定位置 

background: linear-gradient(to bottom, red 50px, green 150px, blue );

<div class="box">
		<div style="height: 50px; border: 1px solid #0066CC;">我的高度是50px</div>
		<div style="height: 100px;border: 1px solid #000000;">我的高度是100px</div>
		<div style="height: 200px;border: 1px solid #9C26B0;">我的高度是200px</div>
</div>



.box{
		width: 100%;
		height: 600px;
		box-sizing: border-box;
		background: linear-gradient(to bottom, red 50px, green 150px, blue ); 
 }

显示如下：

我选的颜色正好是红绿蓝三原色，

red的rgb是255,0,0

green的rgb是0,128,0

blue的rgb是0,0,255

过程：

用取色器从顶部往下移动，然后观察颜色值的变化

 

结论： 

对于 linear-gradient(to bottom, red  50px, green   150px, blue ); 这句代码,

red  50px ： 表示 red 从50px的位置开始渐变为green, 50px以上的部分为纯红色（即不发生渐变）

green   150px： 表示 green从 150px 的位置开始渐变，但与red 不一样（red是第一个色值，它只需要向第二个色值渐变就行了，是单向渐变），但是green夹在中间，它有两个渐变方向，即它既要向第一个色值渐变，也要向第三个色值渐变，

150px的意思是 只有150px的这条横线上的颜色是纯绿色（0,128,0） , 这条横线的上方要向red渐变，这条横线的下方要向blue渐变；

最后一个色值blue 没有指定位置，默认就是以box的底边位置，也就是说600px那条横线上是纯蓝色，它不像green夹在中间，因此它是单向渐变，从599px向上渐变为绿色

扩展：

如果给最后的blue也加一个位置呢？比如改为：

linear-gradient(to bottom, red  50px, green   150px, blue 200px);

说明都在图上