Skip to content

repeating-radial-gradient() ​

描述 ​

repeating-radial-gradient() CSS 函数类似于径向渐变,它是由 radial-gradient()函数完成的,并且具有类似的语法。但渐变的颜色在各个方向上不断重复,形成填充元素背景的图案。

语法 ​

css
repeating-radial-gradient(
       [[ circle  || <length> ]                     [at <position>]? , |
        [ ellipse || [<length> | <percentage> ]{2}] [at <position>]? , |
        [[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , |
                                                     at <position>   ,    <color-stop-list> )
        ---------------------------------------------------------------/-----------------/
                  Contour, size and position of the ending shape          List of color stops

where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
   and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
   and <linear-color-stop> = <color> [ <color-stop-length> ]?
   and <color-stop-length> = [ <percentage> | <length> ]{1,2}
   and <color-hint> = [ <percentage> | <length> ]

值 ​

  • <position> 渐变的位置,其解释方式与背景位置或变换原点相同。如果未指定,则默认居中。
  • <shape> 渐变的形状。该值可以是圆形(意味着渐变的形状是具有恒定半径的圆形)或椭圆形(意味着形状是与轴对齐的椭圆)。如果未指定,则默认为椭圆形。
  • <extent-keyword> 描述结束形状必须有多大的关键字。可能的值为:
    • closest-side 最近侧
    • closest-corner 最近角点
    • farthest-side 最远边
    • farthest-corner 最远角
  • <color-stop> 颜色停止点的 值,后跟可选的停止位置(沿渐变轴的 或 )。百分比为0%,或者长度为0,代表渐变的中心;值 100% 表示结束形状与虚拟梯度射线的交集。之间的百分比值线性定位在虚拟梯度射线上。

效果展示 ​