关于CSS3-Gradient的误解

 /* Firefox 3.6+ */ 
 background: -moz-linear-gradient(left, #ace, #f96 5%, #ace, #f96 95%, #ace); 
 /* Safari 4-5, Chrome 1-9 */ 
 background: -webkit-gradient(linear, left top, right top, from(#ace), color-stop(0.05, #f96), color-stop(0.5, #ace), color-stop(0.95, #f96), to(#ace)); 
 /* Safari 5.1+, Chrome 10+ */ 
 background: -webkit-linear-gradient(left, #ace, #f96 5%, #ace, #f96 95%, #ace); 
 /* Opera 11.10+ */ 
 background: -o-linear-gradient(left, #ace, #f96 5%, #ace, #f96 95%, #ace);

最近在W3CPLUS学习gradient渐变时时遇见如上所示代码，一开始的理解是5%和95%是指的渐变所占的width（怎么会这么傻= =，很明显不可能），没仔细研究就跳过了。

前天晚上在写一个仿360的雷达时，刚好需要用到取多个渐变值，按照我之前的理解，百分比所指的是渐变所占的宽度，程序没有按照我所想的运行，之后仔细看了看实例给的图片才发现自己理解错误

 background: -moz-linear-gradient(left,red, blue 2%, yellow, black 95%,orange); 
 /* Safari 4-5, Chrome 1-9 */ 
 background: -webkit-gradient(linear, left top, right top, from(red), color-stop(0.05, blue), color-stop(0.5, yellow), color-stop(0.95, black), to(orange)); 
 /* Safari 5.1+, Chrome 10+ */ 
 background: -webkit-linear-gradient(left, red, blue 5%, yellow, black 95%, orange); 
 /* Opera 11.10+ */ 
 background: -o-linear-gradient(left, red, blue 5%, yellow, black 95%, orange);};
      /* Firefox 3.6+ */ 

 

为了方便观察将上面的#***换成我们所熟知的blue,black等，重写的代码如下

 background: -moz-linear-gradient(left,red, blue 2%, yellow, black 65%,orange); 
 /* Safari 4-5, Chrome 1-9 */ 
 background: -webkit-gradient(linear, left top, right top, from(red), color-stop(0.05, blue), color-stop(0.5, yellow), color-stop(0.65, black), to(orange)); 
 /* Safari 5.1+, Chrome 10+ */ 
 background: -webkit-linear-gradient(left, red, blue 2%, yellow, black 65%, orange); 
 /* Opera 11.10+ */ 
 background: -o-linear-gradient(left, red, blue 2%, yellow, black 65%, orange);};
      /* Firefox 3.6+ */ 

实例图：

我们发现2%的蓝色其实指的是蓝颜色渐变开始的位置是400宽度(盒子宽度是400px)的2%，也就是8px;

同理65%指的是黑色渐变开始的位置是400盒子的65%,既260px;

 

总结:

实践出真理，很多东西还是要亲自去实践了才能理解，不要想当然。

PS:如果理解有误请指点