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.

* Some parts of this feature may have varying levels of support.

CSS 函数 repeating-radial-gradient() 创建一个从原点辐射的重复渐变组成的 <image>,类似于 radial-gradient() 并且采用相同的参数,但是它会在所有方向上无限重复色标,以覆盖其整个容器,类似于 repeating-linear-gradient()。函数的结果是 <gradient> 数据类型的对象,此对象是一种特殊的 <image> 类型。

尝试一下

每次重复时,色标(color stop)的位置的偏移量都是基准径向渐变长度(最后一个色标和第一个之间的距离)的倍数。因此,最后色标的颜色应该与第一个颜色的颜色保持一致;如果不一致,会导致非常突兀的渐变效果,可以通过将第一个色标重复添加到最后一个中来解决。

与其他渐变一样,径向重复渐变没有内在尺寸,也就是说,它没有固有或首选的尺寸,也没有首选的比例,其实际大小取决于所应用的元素的大小。

由于 <gradient> 属于 <image> 数据类型,因此只能用在可以使用 <image> 的地方。因此,repeating-radial-gradient()background-color 以及其他使用 <color> 数据类型上不起作用。

语法

css
/* 位于容器中间的渐变,
   由红色开始,改变为蓝色,以绿色结束,
   颜色每 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 渐变的结束形状与容器距离渐变中心点最远的一个角相交。

备注: 早期的函数实现中还包含其他关键字(covercontain),分别相当于标准关键字 farthest-cornerclosest-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>

示例

黑白相间的渐变

css
.radial-gradient {
  background: repeating-radial-gradient(
    black,
    black 5px,
    white 5px,
    white 10px
  );
}

Farthest-corner 渐变

css
.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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
repeating-radial-gradient()
at syntax
Double-position color stops
Hue interpolation method
Interpolation color space
Interpolation Hints / Gradient Midpoints

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见