css3 -- 渐变

Posted 2020-07-15 zhanghuiyun

1、Firefox中的线性渐变

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

 

2、Webkit中的线性变化

1 div{
2     -webkit-gradient(linear, 50% 0%, 50% 100%, form(white), to(black));
3 }
4 
5 没有角度值

 

3、Firefox中的放射渐变

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

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

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

inner-center与outer-center

inner-radius与outer-radius

 

4、Webkit中的放射渐变

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

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

 

5、Firefox中：

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

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

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

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

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