CSS Gradient详解

啥也不说，先看代码：

<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 渐变圆心坐标”。

渐变大小如果只有一个值，那么它就代表这个渐变是个正圆，这个数值是它的半径。

如果是两个值，把这个渐变变成椭圆形的；渐变圆心坐标是从容器的原点开始算起。

 

颜色的分布是从0%（渐变圆心）的位置到100%的位置的（100%的位置也就是渐变的半径）。或者说默认情况下，第一个颜色的位置是0%，最后一个颜色是100%。超出这个范围的用距离最近的颜色来填充。

<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>

比如上面的第一个例子，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>

        <style>
            div {
                  width:100px;height:100px;border-radius:50px;
                  background:radial-gradient(at top left,#FFF 50%,#000 80%,#FFF);
                  background:-webkit-radial-gradient(at top left,#FFF 50%,#000 80%,#FFF);
                }
        </style>
等价于：

　　　　 <style>
            div {
                  width:100px;height:100px;border-radius:50px;
                  background:radial-gradient(at top left,transparent 50%,#000 80%,#FFF);
                  background:-webkit-radial-gradient(at top left,transparent 50%,#000 80%,#FFF);
                }
        </style>

        <style>
            div {
                  width:100px;height:100px;border-radius:50px;
                  background:radial-gradient(at top left,#fff 10%,yellow 80%,#000);
                  background:-webkit-radial-gradient(at top left,#fff 10%,yellow 80%,#000);
                }
        </style>