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表示渐变会在距其中心最远的边停下来