/* 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:如果理解有误请指点
原文：http://www.cnblogs.com/moahmn/p/4946441.html