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

巴特西

css3 -- 渐变

最新文章

热门文章