linear-gradient线性渐变说明

发表于 更新于 分类于 阅读次数：

记录 css3 中 linear-gradient 线性渐变的基本使用。

简介

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient> 数据类型，是一种特别的 <image> 数据类型。

列：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box {
  width: 200px;
  height: 400px;
  
  /* 渐变轴为180度，从红色渐变到蓝色 */
  background: linear-gradient( 180deg , red , blue );
  
  /* 从右下到左上、从蓝色渐变到红色 */
  background: linear-gradient(to left top, blue, red);
  
  /* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
	background: linear-gradient(0deg, blue, green 40%, red);
    
}

线性渐变的形成

某个容器元素的线性渐变效果由 渐变线 上的各 着色点 平滑形成。而 渐变线（Gradient Line） 的形成由容器元素 中心点 和 渐变角度 所决定。一但 渐变线 被确定，那么渐变效果会从 起始点（Starting Point） 开始，沿着 渐变线 ，将 渐变线 上各点的颜色映射到容器元素对应区域点上，直到 结束点（Ending Point）。这就像是，在一张画布上连续的放置了一排不同的颜料，刷子沿着这些颜料一刷后，你所看到的颜色效果。

demo-1

渐变 起始点 的确定：

起始点 是 渐变线 上代表起始颜色值的点。起始点 由 渐变线 和过容器元素顶点的垂直线之间的交叉点来定义。（垂直线跟渐变线在同一象限内）

渐变 结束点 的确定：

结束点 是 渐变线 上代表最终颜色值的点。结束点 也是由 渐变线 和从最近的顶点发出的垂直线之间的交叉点定义的，然而从 起始点 的对称点来定义 结束点 是更容易理解的一种方式，因为 结束点 是 起始点 关于容器元素的 中心点 的反射点。

语法

1
2
3

linear-gradient( [ <angle> | to <side-or-corner> ,]? <start color> [ <percentage> | <length> ], <colors> [ <percentage> | <length> ] , <end color> [ <percentage> | <length> ])

按顺序来解释linear-gradient() 函数的参数：

第一个参数：

角度 或者 边角，由此指定渐变的方向。角度值单位为 deg，边角的可选值有：left , right , top , bottom , left top , left bottom , right top , right bottom 。边角值只是角度值的快捷值，角度值是以容器元素中心点为轴顺时针旋转形成，如果不给定此参数的话，默认的角度值为 180deg ，即 to bottom，渐变效果是从上到下的。

第二个参数(必需)：

起始点颜色值及其断点长度。断点长度值单位可以是 px 或 百分比。

第三及其后的参数：

中间点颜色值及其断点长度。即中间可以设置多个不同的颜色渐变。

最后一个参数(必需)：

结束点颜色值及其断点长度。

**例： **

1
2
3
4
5
.box {
    width: 400px;
    height: 300px;
    background: linear-gradient( 180deg , red 50% , blue , yellow );
}

demo-2