CSS 属性篇(九)：linear-gradient()介绍与使用

1、基本介绍

CSS linear-gradient() 函数用于建立一个表示两种或多种颜色线性渐变的图片。
复制代码

1.1 语法：

linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )

<angle>
  用角度值指定渐变的方向（或角度）。角度顺时针增长。

<side-or-corner>
  描述渐变线的起始点位置。
  它包含两个关键词：第一个指出垂直位置left or right，第二个指出水平位置top or bottom。
  关键词的前后顺序无影响，且都是可选的。
  to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。
  其他值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。
  渐变线的结束点与其起点中心对称。

<color-stop>
  由一个<color>值组成，而且跟随着一个可选的终点位置（能够是一个百分比值或者是沿着渐变轴的<length>）。
复制代码

2、渐变角度

2.1 渐变角度定义

linear-gradient是经过渐变的角度来控制渐变的方向。渐变角度值是渐变线与渐变容器中心点向上垂直线之间的夹角。

能够经过下面两种方法来定义这个角度

• 使用关键词：to top、to bottom、to left、to right、to top right、to top left、to bottom right和to bottom left（这些值会被转换为指定的角度值）
• 使用带单位数字定义角度，好比45deg、1turn等

若是省略角度值的设置，那默认是to bottom（对应180deg或者.5turn）

2.2 顶角关键词

在使用顶角关键词时须要注意，若是你想要一个red至blue的渐变，方向是 to top right，以下图所示：

顶角关键字并不意味着渐变线穿过右上角，而是渐变线首先经过元素中心点而且与顶点垂直相交，与中心点垂直线构成指定的夹角。

3、渐变色节点

<color-stop>由一个<color>值组成，而且跟随着一个可选的终点位置（能够是一个百分比值或者是沿着渐变轴的<length>）。

3.1 颜色节点没有指定位置

若是没有显式指定颜色在渐变线上的位置，这将交给浏览器来肯定颜色在渐变线上的位置。
最简单的状况下只有两个颜色，颜色1将被放置在渐变线0%位置（渐变线开始位置），颜色2将被放置在100%位置处（渐变线的结束点）。
若是有三个颜色，那么颜色1在渐变线的0%，颜色2在渐变线的50%，颜色3在渐变线的100%。
在下面的这个示例中，有五个颜色，那么它们的位置分别在0%、25%、50%、75%和100%。它们将沿着渐变线平均分布渐变颜色。

3.2 颜色节点所有指定位置

你也能够在渐变线上显式自定义渐变颜色在渐变线的位置。每一个位置能够用百分比表示（相对于渐变线计算），也能够是任何一个CSS长度单位。

3.3 部分颜色节点指定位置

若是部分渐变色节点没有设置位置，那么浏览器将会根据它上一个已知的位置和下一个已知的位置，均匀的分布在这个区间内。 在上图中，只有第三个颜色yellow指定了位置，在渐变线的30%处。为了很好的分发，它把第一个颜色red放置在渐变线的0%处，最后一个颜色放置在渐变线的100%处。第二个颜色orange放置在渐变线0%至30%的中间位置，第四个颜色red放置在渐变线30%至100%中间位置。

在上图中只有第一个和最后一个颜色放置在渐变线指定位置，剩下的颜色平均分布在二者之间。

3.4 多色变化

若是下一个颜色的开始位置是在上一个颜色结束位置，这意味着浏览器不须要填满两个颜色之余间的空间。

3.5 颜色节点位置纠正处理

若是后面颜色的位置值比前面颜色的位置值更小时，浏览器会自动作相应的纠正处理。

第一个颜色red开始，其定位在渐变线的30%位置处，第二个颜色orange在10%位置，但这是错误的。 这个时候，浏览器将会纠正第二个颜色的位置，它将会和前一个颜色的位置同样，也分布在渐变线的30%位置。 而后第三个颜色yellow分布在渐变线的60%位置处，但紧随其后的第四个颜色为40%，浏览器一样会纠正并设置其位置与前一个颜色位置相同。

4、兼容性

5、linear-gradient()的使用

5.1 条纹背景

传统作法

经过背景图像平铺颜色条图片

新的思路

“若是多个色标具备相同的位置，它们会产生一个无限小的过渡区域，过渡的起止色分别是第一个和最后一个指定值。
从效果上看，颜色会在那个位置忽然变化，而不是一个平滑的渐变过程。”

-- CSS图像（第三版）
复制代码

• 根据linear-gradient()若是下一个颜色的开始位置是在上一个颜色结束位置，这意味着浏览器不须要填满两个颜色之余间的空间，能够建立2条颜色条纹；

• 而后经过background-size设置其尺寸；

• 最后因为背景默认状况下是重复平铺的，水平条纹就会被填满整个背景。

body{
    background: linear-gradient(#fb3 50%, #58a 0);
    background-size: 100% 30px;
}
复制代码

扩展-斜向条纹背景

body{
    background: linear-gradient(45deg, 
        red 25%, blue 0,blue 50%,
        red 0, red 75%, blue 0);
    background-size: 50px 50px;
}
复制代码

5.2 网格背景

传统作法

经过背景图像平铺图片

新的思路

首先经过linear-gradient()建立水平和垂直白线；
而后将两者叠加起来。

body {
    background: #58a;
    background-image: 
        linear-gradient(white 1px, transparent 0),
        linear-gradient(90deg, white 1px, transparent 0);
    background-size: 30px 30px;
}
复制代码

5.3 棋盘背景

传统作法

经过背景图像平铺图片。

新的思路

第一步：

首先使用linear-gradient(45deg)能够建立直角三角形；
而后将第二层渐变在水平和垂直方向均移动贴片长度的一半，就可以将2个直角三角形拼合就造成了可咱们想要的方块；

body{
    background-image: 
		linear-gradient(45deg, red 25%, transparent 0),
		linear-gradient(45deg, transparent 75%, blue 0);
	background-position: 0 0, 15px 15px;
	background-size: 30px 30px;
}
复制代码

第二步：

body {
	background-image: 
		linear-gradient(45deg, #666 25%, transparent 0, transparent 75%, #666 0),
		linear-gradient(45deg, #aaa 25%, transparent 0, transparent 75%, #aaa 0);
	background-position: 0 0, 15px 15px;
	background-size: 30px 30px;
}
复制代码

以上案例示例代码：codepen.io/madman0621/…

参考：

你真的理解CSS的linear-gradient？--大漠