关于CSS3颜色渐变(liner-gradient)的心得(%的用法)

在w3cschool学习了css3的渐变属性。其中的liner-gradient(xx, color1 xx%, color2 xx%)令我感到困惑。不过在自己一番研究后总算有了点收货。

w3cschool上使用的是

repeating-linear-gradient(...) 方法1

还有一种更基本的设定渐变属性的方法是

linear-gradient(...) 方法2

楼主就是被这两种方法搞晕了。

方法1的特点是：未定义的%区域将会被重复填充。举例

重复的线性渐变



注意： Internet Explorer 9 及之前的版本不支持渐变。


	

我们要先建立个简单的概念。在脑中模拟一个下载进度条。他是这样的：|0% - - - 20% - - - 40% - - - 60% - - - 80% - - - 100%|

在grad1的background中，渐变色自左向右渐变。在0%位置是正红色，10%的位置是正黄色，20%的位置是正绿色。此时前20%的颜色布局是这样的。

| red - - - yellow - - - green |

三个颜色之间隔了两个10%。每两个颜色之间区域的颜色都是均匀渐变的。

前20%的颜色填充完毕，那么后80%呢？ repeating-linear-gradient将会吧前20%的作为蓝本，均匀复制填充剩下的区域。就好像：

(here is 0%)| red - - - yellow - - - green |(here is 20%)| red - - - yellow - - - green |(here is 40%)| red - - - yellow - - - green |(here is 60%)| red - - - yellow - - - green |(here is 80%)| red - - - yellow - - - green |(here is 100%)

方法2的特点是：未定义的%区域将会被最后一个颜色全部填充。举例：

重复的线性渐变



注意： Internet Explorer 9 及之前的版本不支持渐变。


			

正如我所说的，他的渐变可以看成这样：

| red - - - yellow - - - green |(here is 20%)| green - - - - - - - - - - - - green |(here is 100%)

正绿色填充了剩下所有区域。