css中的三种渐变

css中的三种渐变

文中的颜色断点和色标指的是同一个东西。

demo可参考此链接：zhuanlan.zhihu.com/p/643134748

linear-graident

参考文档：

developer.mozilla.org/zh-CN/docs/...

blog.csdn.net/weixin_4429...

developer.mozilla.org/zh-CN/docs/...

linear-gradient() CSS 函数创建一个由两种或多种颜色沿一条直线进行线性过渡的图像，其结果是 <gradient> 数据类型的对象，此对象是一种特殊的 <image> 数据类型。

语法：

linear-gradient([ direction ], <angular-color-stop-list>)

示例：

background: linear-gradient(#e66465, #9198e5);

background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);

background: linear-gradient(to left, #333, #333 50%, #eee 75%, #333 75%);

background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);

参数

direction（可选）

取值为预设值或具体的角度。如果没有指定，则默认值为 180deg 等价于 to bottom。

增加值按照顺时针旋转。旋转中心为容器的几何中心。

取值：

to top，从下到上，0deg，0turn

to right，从左到右，90deg，0.25turn

to bottom，从上到下，180deg，0.5turn

to left，从右到左，270deg，0.75turn

to right top，从左下角到右上角，45deg，0.125turn

示例：

background: line-gradient(to top, red, bottom); // 0deg

background: line-gradient(to right, red, white); // 90deg

background: line-gradient(red, bottom); // 180deg

background: line-gradient(to left, red, white); // -90deg

angular-color-stop-list

颜色断点，由color-step和color-hint组成。

color-step

取值为色标，然后是一个或两个色标位置。其中，色标位置可选。

至少设置两个色标。

色标位置取值为百分比或具体的长度。如：75px，30%. （不同渐变函数中取值有所不同，线性渐变和径向渐变可以取值具体长度或百分比，而锥形渐变取值角度或百分比，不能取值具体长度）

在设置色标的位置时，当后面色标的位置比前面色标的位置小的时候，会自动按照前面较大的色标的位置渲染。

默认情况下，如果 0% 的地方没有颜色，那么那里就是声明的第一个颜色。类似地，最后一个颜色也会持续到 100% 的位置，或者如果最后一个色标没有声明长度，那么就是在 100% 的位置。

示例：

linear-gradient(45deg, red 0px 40%, blue 50% 100%);

/* 等价于 */
linear-gradient(45deg, red 40%, blue 50%);

/* red和blue之间是过渡区域，red右下方也为红色，blue左上方也为蓝色 */

如果不指定色标的位置，那么色标的位置将会位于前面和后面两个色标的中点。以下两个渐变是等价的：

linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

一个颜色可以声明为多个相邻的色标，方法就是在 CSS 声明中包括这两个位置。以下的三个渐变是等价的：

linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);

color-hint（可选）

两个色标之间的过渡中点的位置。默认，颜色过渡的中点就是两个色标之间的中点。

示例：

linear-gradient(red 10%, 30%, blue 90%);

上面这个例子中，起始点到 10% 是纯红色，90% 到结束点是纯蓝色。10% 和 90% 之间是颜色从红色过渡到蓝色的地方，设置颜色过渡的中点在 30% 的位置，假如没有设置，过渡中点就会是 50% 的位置。

原理

线性渐变是由一条渐变线和两个或者更多个色标构成的。轴上的每个点都是一个单独的颜色，linear-gradient() 函数会绘制出一系列与渐变线垂直的彩色线，这些彩色线与渐变线相交点的颜色相同。

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

起点 是渐变线上代表起始颜色值的点。终点 是渐变线上代表最终颜色值的点。这两个点都是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义的，然而从起点的对称点来定义终点是更容易理解的一种方式，因为终点是起点关于容器的中心点的对称点。这一复杂的定义导致了一个有趣的效果，有时称为 magic corners：起点附近的点具有跟起点相同的颜色值，终点附近的点具有跟终点相同的颜色值。

示例

1. 创建硬线

要在两种颜色之间创建一条硬线，即创建一个条纹而不是逐渐过渡，可以将相邻的颜色停止设置为相同的位置。

background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);

2. 条纹效果：

用多位置的色标，使两个相邻的颜色有相同的色标值，就可以生成条纹效果。

  background: linear-gradient(
    to right,
    red 20%,
    orange 20% 40%,
    yellow 40% 60%,
    green 60% 80%,
    blue 80%
  );

3. 控制颜色渐变的进程

通过控制两个色标之间的过渡中点的位置实现。

 background: linear-gradient(to top, lime, 20%, cyan); // 设置过渡中点为色标间20%的位置
 
 background: linear-gradient(to top, lime, cyan); // 默认过渡中心的位置位于两个色标的中间位置，即50%的位置

4. 叠加渐变

渐变支持透明度，所以可以将多个背景叠加起来以实现一些非常好看的效果。背景是从顶部到底部堆叠的，指定的第一个就是顶部。

  background: linear-gradient(to right, transparent, mistyrose),url("critters.png");

5. 堆叠渐变

可以将渐变与其他的渐变堆叠起来。只要顶部的渐变不是完全不透明的，那么下面的渐变就会依然可见。

background: 
    linear-gradient(217deg,rgba(255, 0, 0, 0.8), transparent 70.71%), 
    linear-gradient(127deg, rgba(0, 255, 0, 0.8), transparent 70.71%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.8), transparent 70.71%);

6. 斑马线

由于linear-gradient() 本身也是背景图片，所以可以使用背景图片平铺方式来实现。

background: repeating-linear-gradient(red, red 10%, yellow 10%, yellow 20%);
background-size: 100% 20%;

还可以通过repeating-linear-gradient()函数实现。

background: repeating-linear-gradient(red, red 10%, yellow 10%, yellow 20%);

repeating-linear-gradient()

参考文档：

developer.mozilla.org/zh-CN/docs/...

用于创建一个由重复线性渐变组成的背景图片。它会在所有方向上重复渐变以覆盖其整个容器。

重复渐变的长度是第一个色标和最后一个色标之间的距离。如果第一种颜色没有色标长度，则色标长度默认为 0。每次重复时，色标的位置都会以基本线性渐变长度的倍数移动。因此，每个结束色标的位置都会与起始色标的位置重合；如果色值不同，就会产生鲜明的视觉过渡。可以通过重复第一种颜色值作为最后一种颜色值来改变这种情况。

示例：

background: repeating-linear-gradient(45deg, #3f87a6, #ebf8e1 15%, #f69d3c 20%);

background: repeating-linear-gradient(transparent, #4d9f0c 40px),
            repeating-linear-gradient(0.25turn, transparent, #3f87a6 20px);

background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 20px,
    black 20px 40px
  );

background: repeating-linear-gradient(
      190deg,
      rgba(255, 0, 0, 0.5) 40px,
      rgba(255, 153, 0, 0.5) 80px,
      rgba(255, 255, 0, 0.5) 120px,
      rgba(0, 255, 0, 0.5) 160px,
      rgba(0, 0, 255, 0.5) 200px,
      rgba(75, 0, 130, 0.5) 240px,
      rgba(238, 130, 238, 0.5) 280px,
      rgba(255, 0, 0, 0.5) 300px
    ), repeating-linear-gradient(
      -190deg,
      rgba(255, 0, 0, 0.5) 30px,
      rgba(255, 153, 0, 0.5) 60px,
      rgba(255, 255, 0, 0.5) 90px,
      rgba(0, 255, 0, 0.5) 120px,
      rgba(0, 0, 255, 0.5) 150px,
      rgba(75, 0, 130, 0.5) 180px,
      rgba(238, 130, 238, 0.5) 210px,
      rgba(255, 0, 0, 0.5) 230px
    ), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green
        200px, blue 250px, indigo 300px, violet 350px, red 370px);

 background: repeating-linear-gradient(
      90deg,
      transparent,
      transparent 50px,rgba(255, 127, 0, 0.25) 50px,rgba(255, 127, 0, 0.25) 56px,
      transparent 56px,
      transparent 63px,rgba(255, 127, 0, 0.25) 63px,rgba(255, 127, 0, 0.25) 69px,
      transparent 69px,
      transparent 116px,rgba(255, 206, 0, 0.25) 116px,rgba(255, 206, 0, 0.25) 166px
    ), repeating-linear-gradient(
      0deg,
      transparent,
      transparent 50px,rgba(255, 127, 0, 0.25) 50px,rgba(255, 127, 0, 0.25) 56px,
      transparent 56px,
      transparent 63px,rgba(255, 127, 0, 0.25) 63px,rgba(255, 127, 0, 0.25) 69px,
      transparent 69px,
      transparent 116px,rgba(255, 206, 0, 0.25) 116px,rgba(255, 206, 0, 0.25) 166px
    ), repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 5px,rgba(143, 77, 63, 0.25) 5px,rgba(143, 77, 63, 0.25) 10px
    ), repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(
          143,
          77,
          63,
          0.25
        ) 5px, rgba(143, 77, 63, 0.25) 10px);background: repeating-linear-gradient(
      90deg,
      transparent 0 50px,rgba(255, 127, 0, 0.25) 50px 56px,
      transparent 56px 63px,rgba(255, 127, 0, 0.25) 63px 69px,
      transparent 69px 116px,rgba(255, 206, 0, 0.25) 116px 166px
    ), repeating-linear-gradient(
      0deg,
      transparent 0 50px,rgba(255, 127, 0, 0.25) 50px 56px,
      transparent 56px 63px,rgba(255, 127, 0, 0.25) 63px 69px,
      transparent 69px 116px,rgba(255, 206, 0, 0.25) 116px 166px
    ), repeating-linear-gradient(
      -45deg,
      transparent 0 5px,rgba(143, 77, 63, 0.25) 5px 10px
    ), repeating-linear-gradient(45deg, transparent 0 5px, rgba(
          143,
          77,
          63,
          0.25
        ) 5px 10px);

radial-gradient

参考文档：

developer.mozilla.org/zh-CN/docs/...

blog.csdn.net/weixin_4429...

radial-gradient() CSS 函数创建一个图像，该图像由从原点辐射的两种或多种颜色之间的渐进过渡组成，其形状可以是圆形或椭圆形。

语法：

radial-gradient([ shape ]? [size]? [ at <position> ]?, <angular-color-stop-list> )

示例：

background: radial-gradient(#e66465, #9198e5);

background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);

background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);

background: radial-gradient(ellipse at top, #e66465, transparent),
            radial-gradient(ellipse at bottom, #4d9f0c, transparent);

参数

shape（可选）

渐变的形状。取值circle（圆形）或ellipse（椭圆形），默认为ellipse。

size（可选）

渐变的半径。可以取值具体长度或百分比，如30px、40%。也可以取值预设值，如：

• closest-side，半径长度为从中心到离中心最近的边的距离。
• closest-corner，半径长度为从中心到离中心最近的角的距离。
• farthest-side，半径长度为从中心到离中心最远的边的距离。
• farthest-conner，半径长度为从中心到离中心最远的角的距离。

默认值为farthest-conner。

position取值为center时。

position取值为25% 25%时。

如果 shape 被指定为 circle，则可以设置一个size，来确定圆的半径。负值是无效的。此时，size的取值不能为百分比。如果设置两个size，则渐变函数会失效。

如果 shape 被指定为 ellipse，则可以设置两个size。第一个值表示水平半径，第二个值表示垂直半径。百分比值是相对于渐变框在相应维度上的大小的。负值是无效的。此时，size的取值可以为具体长度，也可以为百分比。

如果 shape 没有设置，渐变形状会由给定的大小决定。一个 <length> 产生圆，两个 <length-percentage> 单位的值产生椭圆。一个 <percentage> 值是无效的。

示例：

1. closest-side，即大小是通过开始点（中心）和包围盒的最近一侧的距离设置的。

background: radial-gradient(
    ellipse closest-side,
    red,
    yellow 10%,
    #1e90ff 50%,
    beige
  );

2. farthest-corner，即大小设置为从开始点到包围盒的距离开始点的最远角的距离设置的。

background: radial-gradient(
    ellipse farthest-corner at 90% 90%,
    red,
    yellow 10%,
    #1e90ff 50%,
    beige
  );

3. closest-side，使得圆的半径是渐变中心到最近一侧的距离。在这个例子中，半径是中心到底部的距离，因为渐变位于左侧 25%、底部 25% 的位置，而 div 元素的高度小于宽度。

background: radial-gradient(
    circle closest-side at 25% 75%,
    red,
    yellow 10%,
    #1e90ff 50%,
    beige
  );

5. 对于椭圆，可以使用长度或者百分比来设置其大小，第一个值代表了水平半径，第二个值是竖直半径，可以使用百分比以表示相对于盒在那个维度上的大小的值。在下面这个例子中，使用了百分比以表示水平半径。

  background: radial-gradient(
    ellipse 50% 50px,
    red,
    yellow 10%,
    #1e90ff 50%,
    beige
  );

6. 对于圆，尺寸可以用长度，但不能用百分比。

background: radial-gradient(circle 50px, red, yellow 10%, #1e90ff 50%, beige);

position（可选）

渐变中心的位置。和解析 background-position 或者 transform-origin 的方式相同。如果没有指定，默认为 center。

angular-color-stop-list

颜色断点，最少设置两个颜色断点，可以在每个颜色后设置颜色的起始位置，位置的取值可以为具体长度或百分比。每两个颜色中间可以设置该两个颜色过渡中心点的位置。

原理

径向渐变由其中心点 、结束形状 轮廓、两个及以上色标定义而成。

要创建平滑的渐变，radial-gradient() 函数绘制了一系列从中心点放射到结束形状（甚至可能超出范围）的同心轮廓。结束形状可以是圆形或椭圆形。

色标位于虚拟渐变射线 （virtual gradient ray）上，该渐变射线从中心点水平向右延伸。基于百分比的色标位置是相对于结束形状和此渐变射线之间的交点（代表 100％）。每个形状都是单个颜色，并由其相交的渐变射线上的颜色确定。

示例

1. 基本的径向渐变，和线性渐变一样，创建径向渐变所需要的就是两个颜色。默认情况下，渐变的中心点是 50% 50% 的位置，且渐变是椭圆的以匹配盒的比例。

background: radial-gradient(red, blue);

2. 设置渐变中心的位置，可以使用关键字、百分比或者绝对长度、长度和百分比值的重复（如果存在，否则就是从左侧位置和顶部位置开始的）以指定渐变的中心。

background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);

3. 堆叠径向渐变，就像线性渐变一样，也可以堆叠径向渐变。指定的第一个位于顶部，最后一个位于底部。

background:
        radial-gradient(circle at 50% 0,
          rgba(255, 0, 0, 0.5),
          rgba(255, 0, 0, 0) 70.71%),
        radial-gradient(circle at 6.7% 75%,
          rgba(0, 0, 255, 0.5),
          rgba(0, 0, 255, 0) 70.71%),
        radial-gradient(circle at 93.3% 75%,
          rgba(0, 255, 0, 0.5),
          rgba(0, 255, 0, 0) 70.71%) beige;
border-radius: 50%;

repeating-radial-gradient()

参考文档：

developer.mozilla.org/zh-CN/docs/...

repeating-radial-gradient() 创建一个从原点辐射的重复渐变组成的 <image>，类似于 radial-gradient() 并且采用相同的参数，但是它会在所有方向上无限重复色标，以覆盖其整个容器，类似于 repeating-linear-gradient()。

示例

以创建从中心点重复向外辐射的渐变。颜色会随渐变重复而循环。

background: repeating-radial-gradient(
    black,
    black 5px,
    white 5px,
    white 10px
  );

多个重复的径向渐变。

background:
    repeating-radial-gradient(
        ellipse at 80% 50%,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5) 15px,
        rgba(255, 255, 255, 0.5) 15px,
        rgba(255, 255, 255, 0.5) 30px
      ) top left no-repeat,
    repeating-radial-gradient(
        ellipse at 20% 50%,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5) 10px,
        rgba(255, 255, 255, 0.5) 10px,
        rgba(255, 255, 255, 0.5) 20px
      ) top left no-repeat yellow;
  background-size:
    200px 200px,
    150px 150px;

background: repeating-radial-gradient(#e66465, #9198e5 20%);

background: repeating-radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);

background: repeating-radial-gradient(circle at 100%, #333, #333 10px, #eee 10px, #eee 20px);

conic-gradient()

参考文档：

developer.mozilla.org/zh-CN/docs/...

zhuanlan.zhihu.com/p/371876043

runebook.dev/zh/docs/css...

conic-gradient()锥形渐变函数，可以创建颜色围绕中心点旋转产生的渐变图像。

颜色后面的颜色断点只能取值百分比或度数，绝对长度无效。

在锥形渐变中，颜色围绕圆的中心在圆周上旋转过渡，从顶部开始，顺时针进行。可以设置渐变的角度和渐变的中心。

语法：

conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )

示例：

conic-gradient(red, orange, yellow, green, blue);

conic-gradient(from 0.25turn at 50% 30%, #f69d3c, 10deg, #3f87a6, 350deg, #ebf8e1);

conic-gradient(from 3.1416rad at 10% 50%, #e66465, #9198e5);

conic-gradient( 
     red 6deg, orange 6deg 18deg, yellow 18deg 45deg, 
     green 45deg 110deg, blue 110deg 200deg, purple 200deg);

参数

angle（可选）

起始角度，可选项，默认角度为0deg，顺时针旋转。角度前加from关键字，代表以此角度为起始，使用顺时针方向进行渐变旋转，例：

background: conic-gradient(from 45deg, red, pink);

position（可选）

中心位置，可选项，默认值为center，即锥形渐变的中心点为正中心。位置前加at关键字，可设置锥形渐变的中心位置，设置值与background-position相同，例：

background: conic-gradient(at 25% 25%, red, pink); 

angular-color-stop-list

颜色断点，最少设置两个颜色断点，可以在每个颜色后设置颜色的起始位置，位置的取值只能为百分比或角度。每两个颜色中间可以设置该两个颜色过渡中心点的位置。

/*图一*/
background: conic-gradient(red, pink);
/*图二*/
background: conic-gradient(red, pink 45deg);
/*图三*/
background: conic-gradient(red, pink 12.5%);

图二中设置了pink为45deg，并不是代表渐变的起始角度，而是在45度时，到达我们设置的粉色最深色。

图三设置的12.5%与图二的45deg效果相等，这个百分比的代表，一圈为360度，45度就是12.5%.

原理

锥形渐变语法与径向渐变语法类似，但色标放置在渐变圆弧（圆的周长）周围，而不是从渐变中心出现的渐变线上。使用锥形渐变时，颜色会围绕圆心旋转，从顶部开始顺时针旋转。在径向渐变中，颜色从椭圆中心向各个方向向外过渡。

锥形渐变是通过指示旋转角度、渐变中心，然后指定色标列表来指定的。与线性渐变和径向渐变不同，线性渐变和径向渐变的色标是通过长度指定的，而锥形渐变的色标是通过角度指定的。单位包括角度 deg、梯度 grad、弧度 rad 和整圈的 turn。在一个圆中有 360 度，400 个梯度，2π 弧度，1 圈。支持锥形渐变的浏览器也接受百分比值，100% 等于 360 度，但这不在规范中。

与径向渐变类似，锥形渐变语法用于将渐变中心定位在图像内部甚至外部的任何位置。位置的值类似于两个值的 background-position 语法。

渐变的弧度是渐变的周长。渐变或弧度的起始点 方向是北，或 12:00pm 方向。然后通过 from 角度来旋转。渐变的颜色由倾斜的色标、它们的起点、终点，以及介于两者之间的可选的倾斜的色标决定。颜色之间的过渡可以通过相邻颜色的色标之间的颜色提示来改变。

示例

1. 基本的锥形渐变，和线性和径向的渐变类似，创建锥形渐变所需要的就是两个颜色。默认情况下，渐变的中心位于 50% 50% 的位置，渐变的开始点是朝上的。

background: conic-gradient(red, blue);

2. 设置锥形渐变的位置，和锥形渐变类似，你可以使用关键词、百分比或者绝对长度，以及关键字"at"来设置锥形渐变的中心位置。

background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);

3. 改变角度，默认情况下，你指定的不同色标是围绕着圆均等分布的。你可以在开始时使用"from"关键字以及一个角度或者长度以指定锥形渐变的起始点，然后你可以在后面包括角度或者长度以指定不同的位置。

background: conic-gradient(from 45deg, red, orange 50%, yellow 85%, green);

4. 利用颜色起始、结束色的角度或百分比我们可以做出一个饼图效果。

background: conic-gradient(red 0deg 90deg, pink 90deg 180deg, yellow 180deg);

这样每一个颜色都需要计算角度是比较麻烦的事情，这时我们可以使用渐变断点的一个特性：当后面的渐变断点位置比前面的断点位置小的时候，会自动按照前面较大的断点位置渲染，也就是说我们可以直接简单的设置为：

background: conic-gradient(red 40%, pink 0deg 60%, yellow 0deg);

/*等价于*/
background: conic-gradient(red 40%, pink 40% 60%, yellow 60%);

5. 色轮

background: conic-gradient(hsl(360, 100%, 50%),
hsl(315, 100%, 50%),
hsl(270, 100%, 50%),
hsl(225, 100%, 50%),
hsl(180, 100%, 50%),
hsl(135, 100%, 50%),
hsl(90, 100%, 50%),
hsl(45, 100%, 50%),
hsl(0, 100%, 50%));

6. 棋盘

      background: conic-gradient(#fff 90deg, #000 0 180deg, #fff 0 270deg, #000 0 360deg);
      background-size: 25% 25%; 

repeating-conic-gradient()

参考文档：

developer.mozilla.org/en-US/docs/...

repeating-conic-gradient() CSS函数的作用是:创建一个由重复渐变(而不是单一渐变)组成的图像，颜色过渡围绕中心点旋转(而不是从中心辐射)。

示例

background: repeating-conic-gradient(
  red 0%,
  yellow 15%,
  red 33%
);

background: repeating-conic-gradient(
  from 45deg at 10% 50%,
  brown 0deg 10deg,
  darkgoldenrod 10deg 20deg,
  chocolate 20deg 30deg
);

background-image: repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg);

background: repeating-conic-gradient(
    from 3deg at 25% 25%,
    green,
    blue 2deg 5deg,
    green,
    yellow 15deg 18deg,
    green 20deg
  );

background-image: repeating-conic-gradient(
    in hsl shorter hue,
    red,
    blue 180deg
  );

background-image: repeating-conic-gradient(
    in hsl longer hue,
    red,
    blue 180deg
  );

总结

锥形渐变conic-gradient，创建一个颜色围绕中心点旋转产生的渐变图像。颜色沿着圆周进行渐变，渐变从顶部开始，顺时针进行，可以设置渐变的开始的角度，圆周中心位置，颜色中断的位置。颜色中断的位置只能取百分比或度数，绝对长度无效。

/*线性渐变*/
background: linear-gradient(red, pink, yellow, skyblue);
/*径向渐变*/
background: radial-gradient(red, pink, yellow, skyblue);
/*锥形渐变*/
background: conic-gradient(red, pink, yellow, skyblue);

渐变方向

线性渐变沿着射线的方向进行渐变。

径向渐变沿着半径方向进行渐变。

锥形渐变沿着圆周方向进行渐变。

参数

linear-gradient([ direction ], <angular-color-stop-list>)
radial-gradient([ shape ]? [size]? [ at <position> ]?, <angular-color-stop-list> )
conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )

渐变函数的参数大致可分为前后两部分，前面部分各个属性间没有逗号，后面的anular-clor-stop-list颜色断点使用逗号分隔。

前面部分渐变函数各不相同：

• 线性渐变linear-gradient可以设置渐变线的旋转角度，默认旋转中心为容器的几何中心。

• 径向渐变radial-gradient可以设置渐变的形状，渐变的半径大小，和渐变的中心点。对于圆形来说，半径只需要设置一个值，可以取值length，但不能取值为length-percentage。对于椭圆来说，需要设置两个值，第一个值为水平方向，第二个值为垂直方向，可以取值length和length-percentage；当取值为预设值时，可以根据具体的值和容器的相关参数计算出椭圆公式，画出椭圆。

• 锥形渐变conic-gradient可以设置渐变开始的角度和渐变的中心点。

后面部分基本相同：

• 至少设置两个颜色断点。

• 可以在每个颜色后设置颜色的起始位置，位置根据渐变类型的不同，有不同的取值。线性渐变取值为百分比或具体的长度，径向渐变取值为百分比或具体的长度，锥形渐变只能取值百分比或度数，绝对长度无效。

• 默认情况下，如果 0% 的地方没有颜色，那么那里就是声明的第一个颜色。类似地，最后一个颜色也会持续到 100% 的位置，或者如果最后一个色标没有声明长度，那么就是在 100% 的位置。

• 每两个颜色中间可以设置该两个颜色过渡中心点的位置。

其他

• 渐变图像都是背景图片而不是颜色，所以它们是background/background-image的属性值，而不是color/background-color的属性值。
• background可以赋值多个linear-gradient或radio-gradient。
• 渐变图像的实际大小取决于所应用的元素的大小。
• 渐变中所有与角度相关的设置都是按照顺时针进行的，竖直向上方向度数为0.
• 在设置颜色断点的位置时，当后面颜色的断点位置比前面颜色的断点位置小的时候，会自动按照前面较大的断点位置渲染。