radial-gradient()

描述

radial-gradient() CSS 函数向元素的背景添加径向渐变。径向渐变原则上类似于线性渐变，但一种颜色不会沿着直线变为另一种颜色，而是像水面上围绕一个点的圆圈一样。

语法

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

/* where.. */
<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side

/* and */
<color-stop> = <color> [ <percentage> | <length> ]?

值

• <position> 渐变的位置，其解释方式与背景位置或变换原点相同。如果未指定，则默认居中。
• <shape> 渐变的形状。该值可以是圆形（意味着渐变的形状是具有恒定半径的圆形）或椭圆形（意味着形状是与轴对齐的椭圆）。如果未指定，则默认为椭圆形。
• <extent-keyword> 描述结束形状必须有多大的关键字。可能的值为：
  • closest-side 最近侧
  • closest-corner 最近角点
  • farthest-side 最远边
  • farthest-corner 最远角
• <linear-color-stop> 颜色停止点的 值，后跟一个或两个可选停止位置（沿渐变轴的 或 ）。百分比为 0%，或者长度为 0，代表渐变的中心；值 100% 表示结束形状与虚拟梯度射线的交集。之间的百分比值线性定位在梯度射线上。包含两个停止位置相当于在两个位置声明两个具有相同颜色的颜色停止点。
• <color-hint> 颜色提示是一个插值提示，定义相邻颜色停止点之间的渐变如何进行。长度定义了渐变颜色应在两个颜色停止之间的哪个点到达颜色过渡的中点。如果省略，则颜色过渡的中点是两个颜色停止点之间的中点。

效果展示