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

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