继之前介绍了CSS3新特性,共5篇后,本文继续讨论CSS3的另外一个特效属性颜色渐变Gradients,包括线性渐变Linear Gradients和径向渐变Radial Gradients。线性渐变相对简单,径向渐变Radial Gradients由于参数较多,语法略显复杂,而且网上很多DEMO都不生效,因此写本文对CSS3的渐变使用做一总结以备今后参考,主要参考资料为MDN和w3c。
颜色渐变顾名思义就是一种颜色到另外一种颜色的过渡,可能会有若干个中间颜色,比如红色先变成蓝色再变成黑色。CSS3 定义了两种类型的渐变:
- 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
- 径向渐变(Radial Gradients)- 由它们的中心定义
- 此外还有2种延伸的渐变:重复线性渐变(repeating-linear-gradient),重复径向渐变(repeating-radial-gradient)。
1、线性渐变(Linear Gradients)
创建一个线性渐变,须至少定义两个颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。
语法: background: linear-gradient(direction, color-stop1, color-stop2, …);
说明: direction 可以为空,默认从上到下,可以是方向,也可以是角度,具体值如下:
- 方向:上到下to bottom、下到上to top、左到右to right、右到左to left、左上到右下to bottom right、左下到右上to top right等;
- 角度:下到上0deg、左到右90deg等
1)可以使用多个颜色节点
background: linear-gradient(red, green, blue);
2)颜色可以使用透明色,rgba()
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1))
3)重复的线性渐变,repeating-linear-gradient()
background: repeating-linear-gradient(red, yellow 10%, green 20%);
重复的线性渐变,用法与linear-gradient一致,有个难点(颜色占比问题):
- 可以定义颜色变化幅度,如上例,红色->黄色占比10%,黄色->绿色占比10%,重复5遍
- red, yellow 20%, green 100% 则红色->黄色占比20%,剩余高度由黄色->绿色填充
案例说明:
- Box1,从左到右红绿蓝渐变,重复了5遍
- Box2,从左到右红绿蓝渐变,
- Box3,从左下角到右上角渐变
- Box4,使用了透明渐变色
- Box5,使用了透明渐变色
颜色占比说明:
- linear-gradient和repeating-linear-gradient,颜色参数都可以带颜色占比 color 10%;
- repeating-linear-gradient(red, yellow 10%, green 20%),表示黄色的实色部分在宽度10%处,蓝色实色部分在宽度20%处,具体请看个颜色占比案例:
box2,blue 50%, 蓝色实色部分在宽度50%处,渐变红色到蓝色在宽度50%处结束,剩下宽度由蓝色完全填充;
box3,red 20%,前20%宽度由红色填充,20%宽度到50%宽度为红色到蓝色的渐变区域,剩余50%为蓝色填充区域。
2、径向渐变(Radial Gradients)
参考MDN的图:
创建一个径向渐变,需要:
- 一个中心点(圆心位置),默认为center,元素中心点;
- 指定形状:圆形(circle)还是椭圆(ellipse),默认为ellipse;
- 至少2个颜色点
除此之外,我们可以设置形状大小,颜色占比等。
语法:
radial-gradient(
[ [ circle || <length> ] [ at <position> ]? , |
[ ellipse || [ <length> | <percentage> ]{2} ] [ at <position> ]? , |
[ [ circle | ellipse ] || <extent-keyword> ] [at <position> ]? , |
at <position> ,
]?
<color-stop-list> [ , <color-stop-list> ]+
)
形状大小常量:extent-keyword,有4个值:
- closest-side (指定径向渐变的半径长度为从圆心到离圆心最近的边)
- closest-corner (指定径向渐变的半径长度为从圆心到离圆心最近的角)
- farthest-side (指定径向渐变的半径长度为从圆心到离圆心最远的边)
- farthest-corner (指定径向渐变的半径长度为从圆心到离圆心最远的角),默认值
从语法可以看出,径向渐变比线性渐变复杂,因此相对难学。为便于理解,请大家参考DEMO。
1)设置圆心位置、形状、形状尺寸案例
说明:
- box1,形状默认为椭圆,圆心为center 中心点,size为farthest-corner
- box2,形状为圆,圆心为中心点,size为farthest-corner
- box3,形状为圆,圆心为左上角,size为farthest-corner
- box4,形状为圆,圆心为right center,size为 半径60px
- box5,形状为椭圆,圆心为right center,size为 长半径80px,短半径60px
2)形状大小常量:extent-keyword 案例
说明:
- box1 closest-side,离圆心最近的边
- box2 closest-corner,离圆心最近的角
- box3 farthest-site,离圆心最远的边
- box4 farthest-corner,离圆心最远的角