radial-gradient()

/* A gradient at the center of its container,
   starting red, changing to blue, and finishing green */
radial-gradient(circle at center, red 0, blue, green 100%)

/* hsl color space with longer hue interpolation */
radial-gradient(circle at center in hsl longer hue, red 0, blue, green 100%)

径向渐变通过指定渐变的中心（0% 椭圆将位于哪里）以及结束形状（100% 椭圆）的大小和形状来指定。

<position>

渐变的位置，解释方式与 background-position 或 transform-origin 相同。如果未指定，则默认为 center。

<ending-shape>

渐变的结束形状。该值可以是 circle（表示渐变的形状是半径恒定的圆形）或 ellipse（表示形状是轴对齐的椭圆形）。如果未指定，则默认为 ellipse。

<size>

确定渐变的结束形状的大小。如果省略，则默认为 farthest-corner。它可以显式给出或通过关键字给出。为了方便关键字定义，请考虑渐变框边缘在两个方向上无限延伸，而不是有限的线段。

圆形和椭圆形渐变都接受以下关键字作为它们的 <size>

关键字	描述
closest-side	渐变的结束形状与最靠近其中心的盒子的一侧相遇（对于圆形）或与最靠近中心的垂直和水平两侧相遇（对于椭圆形）。
closest-corner	渐变的结束形状的大小调整为恰好与盒子中距离其中心最近的角相遇。
farthest-side	类似于 closest-side，不同之处在于结束形状的大小调整为与盒子中距离其中心最远的一侧相遇（或垂直和水平两侧）。
farthest-corner	默认值，渐变的结束形状的大小调整为恰好与盒子中距离其中心最远的角相遇。

如果 <ending-shape> 指定为 circle，则大小可以显式给出为 <length>，它提供一个明确的圆形半径。负值无效。

如果 <ending-shape> 指定为 ellipse，则大小可以给出为 <length-percentage>，其中包含两个值以提供明确的椭圆大小。第一个值代表水平半径，第二个值代表垂直半径。百分比值相对于渐变框的对应维度。负值无效。

当省略 <ending-shape> 关键字时，渐变形状由给定的尺寸决定。一个 <length> 值提供一个圆形，而在 <length-percentage> 单位中提供两个值提供一个椭圆形。单个 <percentage> 值无效。

<linear-color-stop>

颜色停点的 <color> 值，后面可以跟着一个或两个可选的停止位置（可以是 <percentage> 或 <length>，沿着渐变轴）。0% 的百分比或 0 的长度表示渐变的中心；100% 的值表示结束形状与虚拟渐变射线的交点。介于两者之间的百分比值在渐变射线上线性定位。包含两个停止位置等同于在两个位置声明两个具有相同颜色的颜色停点。

<color-hint>

颜色提示是定义渐变如何在相邻颜色停点之间变化的插值提示。长度定义了渐变颜色应该在两个颜色停点之间哪个点达到颜色过渡的中点。如果省略，颜色过渡的中点是两个颜色停点之间的中点。

与任何渐变一样，径向渐变具有 没有固有尺寸；也就是说，它没有自然或首选大小，也没有首选比例。它的具体大小将匹配它应用到的元素的大小。

要创建一个重复填充其容器的径向渐变，请使用 repeating-radial-gradient() 函数。

由于 <gradient> 属于 <image> 数据类型，因此它们只能在可以使用 <image> 的地方使用。因此，radial-gradient() 无法在 background-color 和使用 <color> 数据类型的其他属性上使用。

纵横比。">

径向渐变由中心点、结束形状和两个或多个颜色停点定义。

要创建平滑的渐变，radial-gradient() 函数会绘制一系列同心形状，从中心向外辐射到结束形状（并可能超出）。结束形状可以是圆形或椭圆形。

颜色停点位于虚拟渐变射线上，该射线从中心水平向右延伸。基于百分比的颜色停点位置相对于结束形状与该渐变射线的交点，该交点表示 100%。每个形状都是单色，由它所交点上的渐变射线上的颜色确定。

<radial-gradient()> = 
  radial-gradient( [ <radial-gradient-syntax> ] )  

<radial-gradient-syntax> = 
  [ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>  

<radial-shape> = 
  circle   |
  ellipse  

<radial-size> = 
  <radial-extent>               |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?  

<radial-extent> = 
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side    

<length-percentage> = 
  <length>      |
  <percentage>  

<linear-color-stop> = 
  <color> <length-percentage>?  

<linear-color-hint> = 
  <length-percentage>  

<div class="shorter"></div>
<div class="longer"></div>

div {
  display: inline-block;
  margin-top: 1rem;
  width: 45vw;
  height: 80vh;
}

.shorter::before {
  content: "shorter hue";
  display: block;
  margin-top: -1rem;
}

.longer::before {
  content: "longer hue";
  display: block;
  margin-top: -1rem;
}

在这个插值示例中，使用的是 hsl 颜色系统，并且正在对 色调 进行插值。

.shorter {
  background-image: radial-gradient(
    circle at center in hsl shorter hue,
    red,
    blue
  );
}

.longer {
  background-image: radial-gradient(
    circle at center in hsl longer hue,
    red,
    blue
  );
}

左侧的框使用 较短的插值，这意味着颜色直接从红色变为蓝色，使用的是 色轮 上的较短弧。右侧的框使用 较长的插值，这意味着颜色从红色变为蓝色，使用的是较长的弧，经过绿色、黄色和橙色。

请参见 使用 CSS 渐变 以获取更多示例。

• 使用 CSS 渐变
• 其他渐变函数：repeating-radial-gradient()、linear-gradient()、repeating-linear-gradient()、conic-gradient()、repeating-conic-gradient()
• <hue-interpolation-method>
• <color-interpolation-method>
• <image>
• image()
• element()
• image-set()
• cross-fade()