CSS repeating-radial-gradient() function

Example

Repeating radial gradient:

#grad { background-image: repeating-radial-gradient(red, yellow 10%, green 15%); }

The repeating-radial-gradient() function is used to create a repeating radial gradient "image".

Supported versions: CSS3

The numbers in the table indicate the first browser version number that supports the function.

The numbers specified by "webkit", "moz", or "o" are the first version number prefixes that support the function.

Function
repeating-radial-gradient()	26.0 10.0 -webkit-	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-

background-image: repeating-radial-gradient(shape size at position, start-color, ..., last-color);

Value	Description
shape	Defines the shape of the gradient. Can be: ellipse (default): specifies an elliptical radial gradient circle: specifies a circular radial gradient
size	The specific position of the edge contour. It can be the following values: farthest-corner (default): specifies that the radius length of the radial gradient is from the center of the circle to the corner farthest from the center. closest-side: specifies that the radius length of the radial gradient is from the center of the circle to the side closest to the center. closest-corner: specifies that the radius length of the radial gradient is from the center of the circle to the corner closest to the center. farthest-side: opposite to closest-side, specifies that the radius length of the radial gradient is from the center of the circle to the side farthest from the center.
position	circle心Position, class似 onand background-position or transform-origin。Defaultis "center"
start-color, ..., last-color	Used to specify the start and end colors of the gradient. Length values or percentages can be used to specify the start and end color positions, but negative values are not allowed.

other extensions