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%);
}

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

秒客网

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

相关文章