css3径向渐变(圆形渐变) 参数用法

先上CSS代码

{background:-webkit-gradient(radial,150 150,100,150 150,0, from(#000), to(#fff)) ;}  

够简单把，够明了把，不不像其他例子里面有很多颜色。有几个圆。既然是学习，就得先学简单的。

后面的 from 和to  这个就不要说了，问题是 这个不是线性渐变，线性渐变里面from是上to下，或左to右。 圆形渐变（不用径向渐变这一次，这个不是那么直白）里面from是从外到里。

还把，那么现在还有6个数字参数，【 150 150,100,150 150,0】 

怎么会有这么多参数？第一次看晕了有木有啊。这是坑爹爹把~ 好吧， 其实径向渐变是2圆。没错 是2个。那么参数就是 

【圆1坐标，圆1半径，圆2坐标，圆2半径】

我们知道，坐标是x 和y 2个值，所以 6数值 第一个和第二个是没“，”隔开的。同样第四个和第五个也一样。

既然是坐标，所以不想单位就是像素，可以用其他常用单位做定位啦。

不过半径不知道为什么不能用？奇怪呢。

好吧，到现在知道6个参数怎么做渐变呢?  其实，大部分做的时候就是一个颜色到另一个颜色的渐变。也就是说，第2个色是结束点。  所以第二个员压根就没有半径....所以第个参数是0.  如果你需要渐变是结束在这个第一个大员的中心点，那么地第2个圆肯定和第一个圆的xy坐标是一样的，因为径向渐变是从第1圆的最外面的地方渐变到第2个圆的最外面的地方。

相关文章

• CSS Hack 小总结 2012/04/26
• 中文版Chrome下不能显示小于12px的字体 2012/04/17
• CSS Hack 解决各个浏览器兼容的问题 2012/04/15