radial-gradient CSS3的蛋疼的径向渐变

首先，咱来扯一下蛋。下面是扯蛋的代码

<style>

div {

width:100px;height:100px;border-radius:50px;

background:radial-gradient(at 35px 35px,#FFF,#CCC,#FFF);

background:-webkit-radial-gradient(35px 35px,#FFF,#CCC,#FFF);

}

</style>

<div></div>

　　这个代码就能扯出一个蛋来！这个蛋上面的颜色就是使用径向渐变调出来的。第一行样式是设置容器的宽高，并且把圆角设置成宽高的一半（当作半径使用），这样就可以得到一个圆了。后面两行样式是给这个圆上色，使用径向渐变让这个圆看起来像蛋蛋！FireFox和Opera不需要前缀可以直接使用radial-gradient（它们曾经也需要前缀，现在不需要了）。Chrome需要-webkit-前缀才可以使用。而且有前缀的径向渐变和没有前缀的径向渐变语法有一点不同。

　　先来说说无前缀的径向渐变。它使用“at语法”

radial-gradient(

[

[渐变大小]?

[ at 渐变圆心坐标]?

,]?

颜色[ 开始位置]

[,颜色[ 开始位置]]+

);

　　其实真正的语法比这个复杂很多，这个是根据我自己的理解简化了的。说白了就是第一个参数用来指定位置和大小，后面是颜色列表。第一个参数的格式是“渐变大小 at 渐变圆心坐标”。渐变大小如果只有一个值，那么它就代表这个渐变是个正圆，这个数值是它的半径。如果是两个值，把这个渐变变成椭圆形的；渐变圆心坐标是从容器的原点开始算起。 　　


　　这些参数是可以不指定而使用默认值的。圆心坐标的默认值是容器的中心，这个比较简单。而渐变大小的默认值就比较复杂了。如果容器是正方形的，那么渐变大小的默认值就是一个正圆。这个正圆的半径是圆心到容器最远角的距离。

<style>

div {width:100px;height:100px;margin:10px;float:left;}

#a {background:radial-gradient(red,green);}

#b {background:radial-gradient(at 35px 35px,red,green);}

#c {background:radial-gradient(at 0px 0px,red,green);}

</style>

<div id="a"></div>

<div id="b"></div>

<div id="c"></div>

　　如果容器不是正方形，那么这个渐变大小就会变成椭圆。这个椭圆的两个半径就是渐变圆心到容器最远的角形成的矩形的宽高乘以sqrt(2)，这个可以根据椭圆的方程来推导（其实就是矩形的外接椭圆半径）。不过一般不需要做这样的计算。

　　搞明白第一个参数之后就是后面的颜色列表。每个参数除了颜色值以外还可以附带一个开始位置。

<style>

div {width:100px;height:100px;margin:10px;float:left;}

#a {background:radial-gradient(red 100%,green);}

#b {background:radial-gradient(red,green 0%);}

</style>

<div id="a"></div>

<div id="b"></div>

　　颜色的分布是从0%（渐变圆心）的位置到100%的位置的（100%的位置也就是渐变的半径）。或者说默认情况下，第一个颜色的位置是0%，最后一个颜色是100%。超出这个范围的用距离最近的颜色来填充。比如上面的第一个例子，red本身是在0%的位置，但是把它设置成了100%的位置。这样red就从100%的位置开始往外延伸，那么0%到100%的位置就变成没有设置颜色了，这时候它会被自动填充最近的颜色，也就是red。第二个例子也是一样的道理，由于把green设置到了0%的位置，那么red的范围就是0%到0%，这样就看不见了。而green的开始位置被设置到0%后就变成了0%到100%，所以第二个例子从0%到100%的区域都是绿色。默认情况下，设置多个颜色他们会平分这个100%的区域来渐变。当然除了百分比，我们也可以使用具体的像素来设置这个大小。这个用像素设置的大小指的是从渐变圆心向外延伸的距离。

<style>

div {

width:100px;height:100px;margin:10px;float:left;

background:radial-gradient(at 0px 0px,red,green 80%,blue);

}

</style>

<div></div>