#<gradient>

渐变图像类型 <gradient> 用于表现两种或多种颜色的过渡转变。 <gradient> 没有内在尺寸；即，不具备固有或首选的尺寸，也不具备首选的比率。其实际的大小取决于其填充元件的大小。 该数据类型通常用于 background，background-image，background-color 等属性之中。

#语法

<gradient> 数据类型由下列渐变函数定义。

#线形渐变

颜色值沿着一条隐式的直线逐渐过渡。由 linear-gradient() 产生。

/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

#标准语法

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

#可填值

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

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

• <color-stop> 由一个 <color> 值组成，并且跟随着至多一个可选的终点位置。该位置可以是一个 [<percentage>] 或 <number> 值，描述沿渐变方向的偏移量。注意，与 Web 标准不同，Lynx 不支持在一个颜色后跟随多个位置。如果是无单位的 <number>，会被视为百分比处理（如 0.5 视为 50%）。未显式指定位置的颜色点会根据前后已知位置进行线性平均分配。

#径向渐变

颜色值由一个中心点（原点）向外扩散并逐渐过渡到其他颜色值。由 radial-gradient() 函数产生。

/* 从中心向四周渐变 */
radial-gradient(#e66465, #9198e5);

/* 从边缘相切处开始渐变 */
radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);

/* 圆形渐变 */
radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);

/* 椭圆渐变 */
radial-gradient(ellipse at top, #e66465, transparent);

#标准语法

radial-gradient(
  [ [ circle || <length> ]                         [ at <position> ]? , |
    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ] [at <position> ]? , |
    at <position> ,
  ]?
  <color-stop> [ , <color-stop> ]+
)

#可填值

• <position> <position> 与 background-position 或者 transform-origin 类似。如缺省，默认为中心点。

• <shape> 渐变的形状。圆形（circle）或椭圆形（ellipse）。默认值为椭圆。

• <size> 确定渐变的最终形状的大小。

• <extent-keyword> 当渐变的最终形状大小是在某个方向上的无限延伸，而不是有限的线段时，可以使用关键字来描述渐变形状的大小，默认为 farthest-corner。

  关键字	描述
  closest-side	渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
  closest-corner	渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
  farthest-side	与 closest-side 相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
  farthest-corner	渐变的边缘形状与容器距离渐变中心点最远的一个角相交。

• <color-stop> 同 linear-gradient 的描述。

#锥形渐变

颜色值围绕一个中心点（原点）旋转逐渐过渡。由 conic-gradient() 函数产生。

/* 默认从 0deg 开始，中心在 50% 50% */
conic-gradient(red, blue);
/* 从 45deg 开始 */
conic-gradient(from 45deg, red, blue);
/* 中心在左上角 */
conic-gradient(at top left, red, blue);
/* 从 90deg 开始，中心在 20% 30% */
conic-gradient(from 90deg at 20% 30%, red 0%, blue 50%, green 100%);

#标准语法

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

#可填值

• <angle> 起始角度，由关键字 from 引导。默认值为 0deg。支持单位：deg, grad, rad, turn。若使用无单位数字，仅当数值为 0 或开启了 enable_transform_legacy 兼容模式时才被接受。

• <position> 中心位置，由关键字 at 引导。默认值为 50% 50% (center)。支持 1 到 2 个值，语法参考 background-position：

  • 关键字：left, center, right, top, bottom。
  • 数值：<length-percentage> (如 20px, 30% 等)。

• <color-stop-list> 颜色停止列表，由至少两个颜色点组成的逗号分隔列表。每个颜色点包含一个 <color> 以及至多一个可选的位置（<percentage> 或 <number>）。注意，与 Web 标准不同，Lynx 不支持在一个颜色后跟随多个位置。如果是无单位的 <number>，会被视为百分比处理（如 0.5 视为 50%）。未显式指定位置的颜色点会根据前后已知位置进行线性平均分配。

#兼容性