CSS 3 属性学习 —— 1. Gradient 渐变

CSS3 中渐变分为:

  线性渐变(linear-gradient)径向渐变(radial-gradient)两种。

1. 线性渐变

  参数:

   <linear-gradient> = linear-gradient( [<position>,] [<angle>,] <color-stop>[,<color-stop>]+ ); 

  设置线性渐变,我们至少要一个position或者angle来表示我们渐变的防线,同时还要设置两个颜色节点表示起始和终止。

1.1 position 的值有如下选择:
a)     [top | bottom] || [left | right]
b)     <length> [ <length> ]
c)     <length> ‘/‘ <length> <length> ‘/‘ <length>

  a) 表示简单的 从上到下、从下向上、从左往右、从右至左 的渐变方向

    示例1(case a):

background: linear-gradient(to bottom, #000, #FFF); 
background: -webkit-linear-gradient(top, #000, #FFF);
background: -o-linear-gradient(top, #000, #FFF);
background: -moz-linear-gradient(top, #000, #FFF);

  b) 表示在容器中 横向位置渐变的起始位置 和 纵向位置渐变的起始位置(测试完发现只有火狐支持),

background: -moz-linear-gradient(10px 10px, #000, #FFF);

  c) 表示在 b) 的基础上,横向和纵向的偏移距离(发现均不支持)。

  总结:

  上面三种写法经过测试后,发现只有 a 普遍支持,因而建议直接使用 top|left|bottom|right 这样的写法。

 

 1.2 使用角度 angle:

  角度是指从水平位置起,逆时针角度方向进行渐变。

.gradient-30deg{
    background: linear-gradient(30deg, #000, #FFF); 
    background: -webkit-linear-gradient(30deg, #000, #FFF);
    background: -o-linear-gradient(30deg, #000, #FFF);
    background: -moz-linear-gradient(30deg, #000, #FFF);
}

 

1.3 使用 color stop 

  gradient 属性还可以通过 color stop 这一属性,让一个元素进行多次渐进变化。

  可以通过百分比的形式进行每个渐变色节点的设置,或者不进行设置让浏览器去通过个数平均分配,如:

background: -moz-linear-gradient(left, #ace, #f96, #ace); 
background: -webkit-gradient(linear, left top, right top, from(#ace), color-stop(0.5, #f96), to(#ace)); 
background: -webkit-linear-gradient(left, #ace, #f96, #ace); 
background: -o-linear-gradient(left, #ace, #f96, #ace);

 

2. 径向渐变

  参数:

 -moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
 -webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

 

  bg-position(背景位置) 一个 坐标

  angle(角度) 一个或多个  

  shape(形状)一个  圆形或椭圆形 ellipse circle

  size(尺寸) 一个或多个 最近端,最近角,最远端,最远角,包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)

  示例一,只设置颜色

.radial-grad{
    background: radial-gradient(#F00, #0F0, #00F); 
    background: -webkit-radial-gradient(#F00, #0F0, #00F);
    background: -o-radial-gradient(#F00, #0F0, #00F);
    background: -moz-radial-gradient(#F00, #0F0, #00F);
}

  通过示例一我们可以发现,默认情况下shape是使用的椭圆

      示例二,设置形状

  

.radial-grad-cir{
    background: radial-gradient(circle, #F00, #0F0, #00F); 
    background: -webkit-radial-gradient(circle, #F00, #0F0, #00F);
    background: -o-radial-gradient(circle, #F00, #0F0, #00F);
    background: -moz-radial-gradient(circle, #F00, #0F0, #00F);
}

  通过示例可以看到,如果容器不为正方形,设置为圆形会出现显示缺角的情况,这点在实际使用时需要注意。

  示例三,设置尺寸 size

  需要设置圆心位置 这里设置为 30% 30%。

.radial-grad-closest-slide{
    background: radial-gradient(30% 30%, closest-side,#F00, #0F0, #00F); 
    background: -webkit-radial-gradient(30% 30%, closest-side,#F00, #0F0, #00F);
    background: -o-radial-gradient(30% 30%, closest-side,#F00, #0F0, #00F);
    background: -moz-radial-gradient(30% 30%, closest-side,#F00, #0F0, #00F);
}

   示例四,设置repeating

  

.radial-repeat{
    background: -webkit-repeating-radial-gradient(#f00, #0f0 10%, #00f 15%);
      background: -o-repeating-radial-gradient(#f00, #0f0 10%, #00f 15%);
      background: -moz-repeating-radial-gradient(#f00, #0f0 10%, #00f 15%);
    background: repeating-radial-gradient(#f00, #0f0 10%, #00f 15%);
}

注意的是要通过设置比例的形式来进行规定重复次数。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。