第十一讲：CSS渐变之线性渐变

CSS渐变被广泛应用于元素的背景、边框，CSS的遮罩技术也可以使用渐变来实现。CSS渐变本质上是一系列CSS函数，函数名称通常是 *-gradient() 这样的构成，共三种类型，本讲讲第一种，线性渐变函数，linear-gradient()。

所有的渐变至少需要两种颜色参与。两种或更多的颜色参与渐变时，颜色与颜色之间会以特定方式逐渐过渡。以下示例，.box1 类选择器使用了线性渐变做元素的背景图像，参与渐变的颜色三种，红绿蓝：

<style>
.box1 {
	width: 400px;
	height: 260px;
	background: linear-gradient(red, green, blue);
}
</style>

<div class="box1"></div>

点击查看效果

效果是自上而下渐变，每一种颜色都有明显的横向线状的颜色块，故而称这种渐变方式为线性渐变。这是渐变角度设置缺省即没有设置渐变角度时的效果，默认为 to bottom自上而下，即第一个出现的颜色在上边，最后一个颜色在下边， 或 0deg 即0度。角度的可选关键字值还有 to top（自下而上）、 to right（自左而右）、to left(自右向左)，还有一系列的 to top right（自左下向右上）组合法，组合的单词不讲究顺序但需要合法、能够实现。也可以使用角度值，如 45deg 表示45度。至于用关键字表达法还是角度值表达法视需求而定，例如有时我们希望以对角线为渐变分界，那么使用 to top bottom 这类表达法非常省事。代码举例如下，注意角度放在前面，也是用逗号与其他表达字符隔开：

background: linear-gradient(to left, red, green, blue); /* 自右向左 */
background: linear-gradient(to bottom left, red, green, blue); /* 自右上到左下 */
background: linear-gradient(135deg, red, green, blue); /* 135度 */

一些场合下我们想使用多种颜色填充背景却不想要渐变功能，这就涉及到颜色分界问题，术语叫色标，即颜色的起、始标记。以向右渐变为例，我们来看看棕褐色（tan）、青色（teal）和橄榄色（olive）各以 33.3% 占比共同铺满元素且颜色分界明晰的代码和效果：

<style>
.box2 {
	width: 400px;
	height: 100px;
	background: linear-gradient(90deg, tan 33.3%, teal 33.3% 66.6%, olive 0);
}
</style>

<div class="box2">

点击查看效果

90deg 等于 to right，自左向右布局颜色，tan 后面跟 33.3% 表示棕褐色在填充区域的占比，33.3% 也是棕褐色的颜色结束点；青色从棕褐色的结束点 33.3% 开始自己的渐变参与，在 66.6% 处结束自己的颜色；olive 后面跟一个 0 是偷懒的做法，表示它的渐变起点和它前面的颜色的百分比一样（66.6%），且余下的区域都是它的。其实每一个参与渐变的颜色都可以像 teal 的设置一样标出颜色始和颜色止两组占比数据，但通过只有中间部分的颜色需要这么做，头尾的尽量简化表达方式。

CSS渐变的结果被视为图像，做元素背景使用时，它就可以和图像一样可以设置 background-position（背景图像位置）和 background-size（背景图像大小），大家日后可以自行尝试，会有很多意外发现。而重复性线性渐变，repeating-linear-gradient，能极好地实现设置了小尺寸背景+repeat的效果。试看如下的百叶窗效果：

<style>
.box3 {
	width: 400px;
	height: 300px;
	background: repeating-linear-gradient(transparent 2px, green 2px 10px, transparent 0 12px);
}
</style>

<div class="box3">

点击查看效果

重复性线性渐变的技巧之一也是最重要的技巧是最后一个颜色的终止边界值即为该渐变单元的尺寸，12px意味着所有的渐变单元尺寸都是12个像素，然后重复铺开；技巧之二是它和 linear-gradient 一样，颜色之间也可以做硬边即硬过渡以追求所需效果。

CSS背景支持多图背景，渐变既然被视为图像，也就可以使用多组渐变来构造预设的图案。图案重叠会出现后面的覆盖前面的现象，我们可以借助透明色、背景融合等技术进行处理，让多组背景彼此交融。下面的例子，我们使用透明色 transparent 和实体颜色做两组重复性线性渐变背景，并让它们对角线交叉，构建出奇妙的图案：

<style>
.box4 {
	width: 400px;
	height: 300px;
	background: 
		repeating-linear-gradient(to top right, transparent, green, transparent 8%),
		repeating-linear-gradient(to top left, transparent, green, transparent 8%);
}
</style>

<div class="box4">

点击查看效果

本讲介绍的线性渐变是非常基础的，所提到的渐变技巧和所揭示的渐变效果可能连冰山的一角都不到，但已足以令人惊叹。有兴趣有余力的童鞋可以网补更多的CSS线性渐变知识与技巧。

作业：制作一个方格稿纸元素，尺寸 600 * 360，方格大小自定。提示：① 参照百叶窗示例制作两组重复性渐变令其纵横交叉；② 如果效果存在边缘不能封口，可考虑使用 border 边框进行弥补，若此，注意保持边框尺寸与方格线相一致。

返回目录