今天刚好在复习渐变这一块,看到
background: linear-gradient(red 10%, green 85%, blue 90%);
的时候,我是懵逼的,就在想这百分比是咋回事?怎么这个blue90%的占比还就显示了这么一点点.后来我就研究了一下,如下:
如果我将渐变这样设置:
background: linear-gradient(red 0%, green 50%, blue 100%);
他会显式如下:
就是三个颜色均匀分布的样子,红色到绿色的渐变占50%,绿色到蓝色的渐变占100%.
所以结论是: 相邻两个区域百分比的差就是这两个颜色渐变过渡的面积占比.(省略了更多的推论过程,有兴趣的可以自己尝试).
那么,如果后面颜色的百分比的值小于前面的会怎样呢? 他会取前面所有百分比的最大值.
background: linear-gradient(red 0%, green 50%, blue 50%);
我们先看这个:
红色到绿色的过渡占了50%,蓝色独占50%,与绿色之间没有过渡效果(他们之间的差为0).
然后我把蓝色的占比改的小于50%,结果是:
background: linear-gradient(red 0%, green 50%, blue 10%);
结果就是一毛一样~
暂时不知道为什么会是这种设定,日后知道了回来更,有知道的朋友也麻烦告知一下,多谢~~~
2019.5.2