渐变是从一种颜色逐渐蜕变到另一种颜色。线性渐变就是沿着一根轴线(水平、垂直或某个角度)改变颜色,从起点到终点颜色进行顺序渐变。
在这里,我将介绍在CSS中怎么实现线性渐变的方法。
线性渐变
创建线性渐变你需要指定渐变的轴线和延轴线变化的多种颜色,颜色将按与轴线垂直的方向被绘制,多种颜色间将实现渐变平滑过渡。具体语法如下:
linear-gradient( gradient_line, color1, color2, ... )
gradient_line指定了渐变线,后面跟随多种延轴线变化的颜色。
轴线
轴线可以省略,这时,它使用默认值“to bottom”,指定轴线可以使用两种方式:
常量 | 说明 | 角度值 |
---|---|---|
to top | 向上 | 0deg |
to right | 向右 | 90deg |
to bottom | 向下 | 180deg |
to left | 向左 | 270deg |
可以将轴线的绘制方式理解为:从元素的中心开始,延指定的角度向元素的两个方向扩展,轴线的结束点就是延指定角度前进与元素边框相交的点,而轴线的开始点就是延指定角度反方向前进与元素边框相交的点。下面我们通过一些实例加深对轴线的理解。
线性渐变的例子
下面是一些在背景上应用线性渐变的例子。
垂直渐变
background: linear-gradient(#cd6600, #0067cd);
你也可以指定轴线,下面的几种方式都可以达到和上面同样的效果,如下:
background: linear-gradient(to top, #cd6600, #0067cd);
background: linear-gradient(to bottom, #cd6600, #0067cd);
background: linear-gradient(180deg, #cd6600, #0067cd);
background: linear-gradient(to bottom, #cd6600 0%, #0067cd 100%);
斜角渐变
background: linear-gradient(135deg, #cd6600, #0067cd);
你也可以指定负角度,如下:
background: linear-gradient(-45deg, #cd6600, #0067cd);
多色渐变
background: linear-gradient(#6600cd, #cd6600 20%, #00cd66);
多色斜角渐变
background: linear-gradient(to top right, #cd6600, white, #0067cd);
重复线性渐变
重复线性渐变就是线性渐变的重复版本repeating-linear-gradient,当你定义好了你的线性渐变方式后,重复线性渐变会基于轴线不断的重复你的渐变方式,直到占满整个背景。
使用重复线性渐变的关键是你需要定义好颜色结点,需要注意的是你定义的最后一种颜色将和第一种颜色相接在一起,处理不当将导致颜色的急剧变化。
下面通过一些例子来说明重复线性渐变的使用方法。
background: repeating-linear-gradient(#cd6600, #0067cd 20px, #cd6600 40px);
background: repeating-linear-gradient(90deg, #cd6600, #0067cd 20px, #cd6600 40px);
background: repeating-linear-gradient(135deg, #cd6600, #0067cd 20px, #cd6600 40px);
颜色结点
颜色结点是沿着渐变轴线被放置的点,定义格式如下:
<color-stop> = <color> [ <percentage> | <length> ]
首先制定颜色(color),然后指定位置,使用百分比值或者长度值表示。百分比值对应轴线长度的百分比,0%表示起始点,而100%表示结束点;长度值指从轴线的起始点开始向结束点方向计算的数值。颜色结点通常放置在起始点和结束点之间,但不是必需的,轴线可以在两个方向上无限扩展,而颜色结点可以放置在线上的任何位置。
在每个颜色结点,线呈现为颜色结点的颜色。在两个颜色结点之间,线呈现的为从一种颜色过渡到另一种颜色过渡过程。在第一个颜色结点之前,线呈现为第一个颜色结点的颜色,而在最后一个结点之后,线呈现为最后一个颜色结点的颜色。
以下步骤定义了处理颜色结点列表的行为,应用这些规则后,所有的颜色结点都将有一个明确的位置:
- 如果第一个颜色结点没有指定位置,设置它的位置到0%;如果最后一个结点没有指定位置,设置其为100%;
- 如果一个颜色结点的位置小于了在它之前的任意一个颜色结点的位置,设置其位置等于它之前的所有颜色结点位置中最大的位置;
- 如果存在一些颜色结点没有指定位置,那么,为那些相邻的没有指定位置的颜色结点,设置它们的位置使它们平均占据空间。
如果多个颜色结点有相同的位置,它们产生一个从一种颜色到另一种颜色的急剧的转换。从效果来看,就是从一种颜色突然改变到另一种颜色。
为了理解上面的规则,下面是一些例子来帮助你的理解:
- linear-gradient(red, white 20%, blue)
相当于
inear-gradient(red 0%, white 20%, blue 100%)颜色结点例子 - linear-gradient(red 40%, white, black, blue)
相当于
linear-gradient(red 40%, white 60%, black 80%, blue 100%)颜色结点例子 - linear-gradient(red -50%, white, blue)
相当于
linear-gradient(red -50%, white 25%, blue 100%)颜色结点例子 - linear-gradient(red -50px, white, blue)
相当于
linear-gradient(red -50px, white calc(-25px + 50%), blue 100%)颜色结点例子 - linear-gradient(red 20px, white 0px, blue 40px)
相当于
linear-gradient(red 20px, white 20px, blue 40px)颜色结点例子 - linear-gradient(red, white -50%, black 150%, blue)
相当于
linear-gradient(red 0%, white 0%, black 150%, blue 150%)颜色结点例子 - linear-gradient(red 80px, white 0px, black, blue 100px)
相当于
linear-gradient(red 80px, white 80px, black 90px, blue 100px)颜色结点例子
相信你已经理解清楚了颜色结点的含义,接下来,我们就要利用颜色结点制作我们的条纹背景了。
条纹背景
在讲解颜色结点时,我们提到“如果多个颜色结点有相同的位置,它们产生一个从一种颜色到另一种颜色的急剧的转换。从效果来看,就是从一种颜色突然改变到另一种颜色”。根据这个定义,我们只需要将多个颜色结点设置到同一个位置,就可以轻易的得到条纹背景效果。下面我们来看各种条纹背景是怎么产生的。
水平条纹背景
将两种颜色的颜色结点位置设置为一样就可以产生条纹背景,如下:
background: linear-gradient(#cd6600 50%, #0067cd 50%);
利用背景的重复机制,我们可以创造出更多的条纹:
background: linear-gradient(#cd6600 50%, #0067cd 0);
background-size: 100% 20%;
这样我们就利用将整个背景划分为了10个条纹,但每个条纹的高度并不一定要一样,只要改变比例就可以做到:
background: linear-gradient(#cd6600 80%, #0067cd 0);
background-size: 100% 20px;
当然,我们还可以指定多种颜色:
background: linear-gradient(#cd6600 33.3%, #0067cd 0, #0067cd 66.6%, #00cd66 0);
background-size: 100% 30px;
或者创建分割线效果:
background: linear-gradient(rgba(0,0,0,.5) 1px, #fff 1px);
background-size: 100% 3px;
或许你还想到了什么,赶快去尝试一下吧。
垂直条纹背景
垂直条纹背景类似,只是需要转换一下宽和高的设置方式,如下:
background: linear-gradient(to right, #cd6600 50%, #0067cd 0);
background-size: 20% 100%;
其它的和水平方式是类似的,可以自己去尝试一下。
对角条纹背景
我们可以使用重复线性渐变轻易的创建出对角条纹背景:
background: repeating-linear-gradient(60deg, #cd6600, #cd6600 10%, #0067cd 0, #0067cd 20%);
很容易就能指定多种颜色:
background: repeating-linear-gradient(60deg, #cd6600, #cd6600 10%, #0067cd 0, #0067cd 20%, #00cd66 0, #00cd66 30%);
但在实际的应用中,使用太多的背景颜色往往并不是什么好事,因此,更通常的情况下,也许你会考虑使用一种背景,但是在颜色的深浅上创造变化:
background: repeating-linear-gradient(45deg, RGBA(0,103,205,0.5), RGBA(0,103,205,0.5) 10%, RGBA(0,103,205,0.3) 0, RGBA(0,103,205,0.3) 20%);
所有这一切是否已经激发了你的灵感,赶快动手试一下吧。