关于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%)


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



你可能感兴趣的:(关于CSS3颜色渐变(liner-gradient)的心得(%的用法))