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% 表示结束形状与虚拟梯度射线的交集。之间的百分比值线性定位在虚拟梯度射线上。
