先上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个圆的最外面的地方。