Background 渐变

线性渐变- linear-gradient

定义

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

1. linear-gradient() 函数没有内在尺寸；它不具备固有的或首选的尺寸，也不具备首选的比率。该函数的具体尺寸将与其适用的元素尺寸匹配。
2. 由于gradient数据类型是image的子数据类型，所以gradient只能被用于image可以使用的地方。因此，linear-gradient() 并不适用于background-color以及类似的 <color>数据类型的属性中。
3. 线性渐变目前不能实现重复渐变。默认情况下，渐变会撑满它被定义的元素, 重复渐变可以参考repeating-linear-gradient。
4. 如果所有点和长度都使用固定单位（而不是相对于background-size的值指定的百分比或关键字），则渐变背景不受 background-size 的影响。

构成

线性渐变由一个轴 (梯度线) 定义，其上的每个点具有两种或多种的颜色，且轴上的每个点都具有独立的颜色。为了构建出平滑的渐变，linear-gradient() 函数构建一系列垂直于渐变线的着色线，每一条着色线的颜色则取决于与之垂直相交的渐变线上的色点。

渐变线 Gradient Line

由包含渐变图形的容器的中心点和一个角度来定义的。渐变线上的颜色值是由不同的点来定义，包括起始点，终点，以及两者之间的可选的中间点（中间点可以有多个）。

起始点 Starting point

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

终点 Ending point

是渐变线上代表最终颜色值的点。终点也是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义的。终点是起点关于容器的中心点的反射点。

语法

background: linear-gradient(side-or-corner/angle, start color position, position, ..., last-color position);

第一个参数：渐变方向

• 默认不写：相当于to bottom, 从上到下
• to + 关键词：第一个指出水平位置left or right，第二个指出垂直位置top or bottom。关键词的先后顺序无影响，且都是可选的。
• 角度：渐变线与渐变容器中心点向上垂直线之间的夹角，角度顺时针增加。

background: linear-gradient(40deg, #333, #333 50%, #eee 75%);
// top模式，顺时针旋转40度

第二个参数：渐变颜色

• 英文字母进行颜色控制
• 16进制#RRGGBB进行颜色控制

• 16进制加透明度#RRGGBBAA进行颜色控制：不推荐使用，因为会带来比较大的兼容问题。

  Chrome和火狐浏览器是支持的，形式是#rrggbbaa 但是这种形式在IE中就是不支持的。
  IE9以下如果加透明度是按照#aarrggbb的形式，但是IE10和IE11不管用哪个格式都出不来。所以不推荐使用 。

  AA指透明度：00表示全透明，FF表示完全不透明。

  RR指红色值

  GG指绿色值

  BB指蓝色值

  0~1的透明度转化为00-FF的十六进制透明度方式： Math.round(256 * opacity).toString(16)

• 使用rgb/rgba进行颜色控制
• 使用多个颜色控制： linear-gradient(#3a1c71, #d76d77,#ffaf7b);

颜色值后添加一个可选的终点位置（百分比值/沿着渐变轴的length）。

颜色中转点

颜色中转点是一个插值提示，它定义了从一个颜色的终止点平滑过渡到另一个颜色的终止点的中点位置。如果省略，它被放置前一个颜色与后一个颜色的中间位置处， 是两个颜色转换的中点。 如果定义，它被放置在前一个颜色与后一个颜色之间定义的位置。

linear-gradient(red 10%, 30%, blue 90%);
// 从起始点到10%的位置标记红色，从90%到结束标记蓝色
// 在10%到90%之间，颜色从红色过渡到蓝色，然而过渡的中点是在30%上，没有30%会默认为50%。

如果两个或多个颜色终止在同一位置，则在该位置声明的第一个颜色和最后一个颜色之间的过渡将是一条生硬线。

颜色终止列表中颜色的终止点应该是依次递增的。如果后面的颜色终止点小于等于前面颜色的终止点则后面的会被覆盖，从而创建一个硬转换。

linear-gradient(red 40%, yellow 30%, blue 65%);
// 0 ~ 40%是红色，无渐变。30% - 65%是黄蓝渐变，65%- 100%是蓝色

径向渐变- radial-gradient

定义

CSS radial-gradient() 函数创建了一个图片，一个中心点向外围进行颜色渐变。这个方法得到的是一个CSSgradient数据类型的对象，是 <image> 的一种。

1. 与其他渐变相同，径向渐变是一个不固定尺寸的图片。它没有默认尺寸、比例，具体尺寸由它所定义的元素尺寸决定。

构成

径向渐变(Radial gradients)是从圆心点以椭圆形状向外扩散的渐变，渐变的实现由两部分组成：椭圆和色标。椭圆部分用来控制径向渐变的位置、大小和形状等；色标部分包含一个颜色值和一个位置，用来控制渐变的颜色变化。

径向渐变的中心点至边缘形状以及其延伸的部分，由连续缩放的若干同心轮廓组成，这个轮廓由设定的边缘形状决定。

色值结束点用于设定虚拟渐变射线（virtual gradient ray）的变化方式，由中心点水平变化至右侧（如图）。色值结束点由百分比设定时，则是相对于终点为渐变射线与边缘形状相交点的渐变半径，渐变半径的终点位置即为100%。每个轮廓均为纯色，颜色由渐变射线上相应横切点所定义的颜色决定。

语法

background: radial-gradient(size shape at position,start-color, ..., last-color);

第一个参数： 确认渐变形状，大小，位置

半径 size： 确定渐变大小

• 空：不写半径默认从中间开始，样式为圆形。
• 写一个值： 默认是是圆形，中心点是圆心。
• 写两个值：默认为椭圆，一个是横向的长度，一个是纵向的长度。

• 传关键字：(closest-side/closest-corner/farthest-side/farthest-corner)，大小是由位置决定。

  closest-side: 半径为从圆心到最近边
  closest-corner: 半径为从圆心到最近角
  farthest-side: 半径为从圆心到最远边
  farthest-corner: 半径为从圆心到最远角【默认值】

  左上为最近角，右上为最近边；左下为最远角，右下为最远边

形状 shape： 确定渐变形状

• circle/ellipse: 如果div是正方形, circle和ellipse并没有什么区别; 如果是长方形，ellipse根据长度压缩

background: radial-gradient(circle,hotpink, darkblue);
background: radial-gradient(ellipse,hotpink, darkblue);

• 长度范围和形状: 半径要写到形状前面，且半径作用大于形状

位置 position: 确定圆心位置

• 有参数: center/top/bottom/left/right
• 具体数值确定圆心
• 百分比确定圆心

重复线性渐变 - repeating-linear-gradient

定义

CSS函数 repeating-linear-gradient() 创建一个由重复线性渐变组成的<image>， 这是一个类似 linear-gradient 的函数，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器。

/* 0 - 10%是蓝色，10 - 20%是蓝红线性渐变，然后会把这20%的颜色重复渲染。*/
background:repeating-linear-gradient(to left top, blue 10%, red 20%);

1. 每次重复时，色标位置的偏移量都是基准渐变长度（最后一个色标和第一个之间的距离）的倍数。因此，最后色标的色值应该与第一个色标的色值保持一致；如果不一致的话，会导致非常突兀的渐变效果
2. 与其他渐变一样，线形重复渐变没有没有原始尺寸，也没有首选的比例。它将自适应于对应元素的尺寸。
3. 如何判断从什么位置开始循环呢？如何判断一段渐变的长度呢？其关键因素在于色标的位置。

   一个渐变的长度为最后一个标记的位置。

重复径向渐变- repeating-radial-gradient

定义

CSS函数repeating-radial-gradient() 创建一个从原点辐射的重复渐变组成的<image> 。它类似于radial-gradient 并且采用相同的参数，但是它会在所有方向上重复颜色，以覆盖其整个容器。函数的结果是 <gradient> 数据类型的对象， 是一种特殊的<image>类型。

/* 一个从容器中心点开始的重复渐变, 从红色开始，渐变到蓝色，再渐变到绿色 */
repeating-radial-gradient(circle at center, red 0, blue, green 30px);

1. 每次重复时，色标位置的偏移量都是基准渐变长度（最后一个色标和第一个之间的距离）的倍数。因此，最后色标的色值应该与第一个色标的色值保持一致；如果不一致的话，会导致非常突兀的渐变效果。
2. 与其他渐变一样，线形重复渐变没有提供固定的尺寸； 即, 它没有原始尺寸或首选尺寸，也没有首选的比列。它将自适应于对应元素的尺寸。
3. 只有当首尾两颜色位置不在0%或100%时，重复渐变才生效

参考文章

你真的理解CSS的linear-gradient？

深入理解CSS径向渐变radial-gradient

深入理解CSS线性渐变linear-gradient