repeating-radial-gradient()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
CSS 函数 repeating-radial-gradient()
创建一个从原点辐射的重复渐变组成的 <image>
,类似于 radial-gradient()
并且采用相同的参数,但是它会在所有方向上无限重复色标,以覆盖其整个容器,类似于 repeating-linear-gradient()
。函数的结果是 <gradient>
数据类型的对象,此对象是一种特殊的 <image>
类型。
尝试一下
每次重复时,色标(color stop)的位置的偏移量都是基准径向渐变长度(最后一个色标和第一个之间的距离)的倍数。因此,最后色标的颜色应该与第一个颜色的颜色保持一致;如果不一致,会导致非常突兀的渐变效果,可以通过将第一个色标重复添加到最后一个中来解决。
与其他渐变一样,径向重复渐变没有内在尺寸,也就是说,它没有固有或首选的尺寸,也没有首选的比例,其实际大小取决于所应用的元素的大小。
由于 <gradient>
属于 <image>
数据类型,因此只能用在可以使用 <image>
的地方。因此,repeating-radial-gradient()
在background-color
以及其他使用 <color>
数据类型上不起作用。
语法
/* 位于容器中间的渐变,
由红色开始,改变为蓝色,以绿色结束,
颜色每 30px 重复一次 */
repeating-radial-gradient(circle at center, red 0, blue, green 30px);
/* 接近容器左上角的椭圆形渐变,
由红色开始,改变为绿色,然后再变回红色,
在中心和右下角之之间重复五次,
在中心和左上角之间只重复一次 */
repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);
值
<position>
-
渐变的位置,和
background-position
或者transform-origin
以相同方式解析。如果没有指定,默认为center
。 <shape>
-
渐变的结束形状。值可以是
circle
(圆形,渐变的形状是一个半径不变的正圆)或ellipse
(椭圆,形状为轴对称椭圆)。如果没有指定,默认为ellipse
。 <extent-keyword>
-
关键字,描述结束形状应该有多大。可能的值包括:
关键字 描述 closest-side
渐变结束形状如果是圆形,与容器距离渐变中心点最近的一边相切,如果是椭圆,则与距离渐变中心点最近的垂直和水平边相切。 closest-corner
渐变结束形状与容器距离渐变中心点最近的一个角相交。 farthest-side
类似于 closest-side
,结束形状与容器距离渐变中心点最远的一边(或最远的垂直和水平边)相切。farthest-corner
渐变的结束形状与容器距离渐变中心点最远的一个角相交。 备注:早期的函数实现中还包含其他关键字(
cover
和contain
),分别相当于标准关键字farthest-corner
和closest-side
。但因为在某些实现中丢弃了这些旧的关键字,所以请仅使用标准关键字。 <color-stop>
-
色标(color stop)的
<color>
值,然后是一个或两个可选的色标位置(沿渐变轴的<percentage>
或<length>
)。百分比值0%
,或者长度值0
,表示渐变中心点;百分比值100%
表示渐变射线与结束形状相交的点。其间的百分比值线性对应渐变射线上的点。
形式语法
<repeating-radial-gradient()> =
repeating-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>
示例
黑白相间的渐变
.radial-gradient {
background: repeating-radial-gradient(
black,
black 5px,
white 5px,
white 10px
);
}
Farthest-corner 渐变
.radial-gradient {
background: repeating-radial-gradient(
ellipse farthest-corner at 20% 20%,
red,
black 5%,
blue 5%,
green 10%
);
background: repeating-radial-gradient(
ellipse farthest-corner at 20% 20%,
red 0 5%,
green 5% 10%
);
}
这个椭圆形渐变会位于左上角靠中心 20% 的位置,在中心和最远角(右下角)之间重复 10 次。支持多位置色标的浏览器会显示为红色和绿色条纹的椭圆形。不支持这个语法的浏览器仍会从红色到黑色再由蓝色到绿色的渐变。
备注:更多例子请见使用 CSS 渐变。
规范
Specification |
---|
CSS Images Module Level 3 # repeating-gradients |
浏览器兼容性
BCD tables only load in the browser