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); }
通过示例可以看到,如果容器不为正方形,设置为圆形会出现显示缺角的情况,这点在实际使用时需要注意。
需要设置圆心位置 这里设置为 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); }
.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%); }
注意的是要通过设置比例的形式来进行规定重复次数。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。