css3 -- 渐变

1、Firefox中的线性渐变

 E{
   background-image:-moz-linear-gradient(point or angle , form-stop,
   color-stop, to-stop);
 }

2、Webkit中的线性变化

 div{
     -webkit-gradient(linear, 50% 0%, 50% 100%, form(white), to(black));
 }

 没有角度值

3、Firefox中的放射渐变

 E{
    background-image:-moz-radius-gradient(point or angle ,
    shape or size，  form-stop, color-stop, to-stop);
  }

其中shape使用一个关键字常量值，可以是circle或ellipse（默认值）

渐变开始点以及结束点，半径距离：

inner-center与outer-center

inner-radius与outer-radius

4、Webkit中的放射渐变

  E{
       background-image：-webkit-gradient(type, inner-center,
       inner- radius, out-center, out-radius, from(from-stop),
       color-stop(color-stop) , to(to-stop));
  }

不允许创建椭圆形状的渐变，必须全部使用圆形的

5、Firefox中：

 div{
    background-image:-moz-radius-gradient(contain circle,white,black);
 }

contain是属于size的值，表示渐变会在方框最接近中心店的一端停止下来----     closest-side

cover渐变会在距离中心店最远的元素角落停止下来---    farthest-corner

closest-conner表示渐变会在最接近其中心的角落停下来

farthest-side表示渐变会在距其中心最远的边停下来