前端学习笔记08 ---- 关于css3渐变中颜色后面跟的百分比的含义

关于css3渐变中颜色后面跟的百分比的含义：

 

背景：

background: repeating-linear-gradient(red, yellow 10%, green 20%);

有这么一个css规则，它的效果如下：

可以尝试去更改一下这个百分比：

background: repeating-linear-gradient(red, yellow 60%, green 20%);

 

给人感觉就很奇怪，绿色去哪里了？

上网查了之后才知道，颜色后面跟的百分比是这个颜色值距离起点的开始位置，30%就是距离起点30%开始这个颜色。

那为什么绿色没了？这种情况的定义是这样的：

如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值

也就是说如果一个颜色前面有比它百分比大的，那么它的颜色就会变成那个百分比最大的颜色，所以例子的绿色就变成了黄色。

 

不过在径向渐变（ radial-gradient）中却有完全不一样了。

在 radial-gradient 里面的百分比就完全是颜色的大小，而不是它的位置了。