CSS reference manual

CSS @rules

CSS attribute大全

CSS @charset Rule CSS Functions (Functions)

CSS repeating-radial-gradient() function

CSS function repeating-radial-gradient() creates a <image> composed of repeating gradients radiating from the origin. It is similar to radial-gradient, using the same parameters, but it will repeat the colors in all directions to cover its entire container. The result is an object of the <gradient> data type, which is a special type of <image>.

CSS Function

Online Example

Repeated linear gradient:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
<style>
#grad1　{
　　height:　200px;
　　background-image: repeating-radial-gradient(red,	 yellow　10,	green　15%);
}
</style>
</head>
<body>
<h3>Repeating Radial Gradient</h3>
<div id="grad1></div>
<p><strong>Notice:</strong> Internet Explorer　9　and earlier versions do not support gradients.</p>
</body>
</html>

Test to see ‹/›

Definition and Usage

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

Supported Version: CSS3

Browser Compatibility

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

"webkit" or "moz" or "o" prefixed numbers indicate the first version number supported by 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-

CSS Syntax

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

value	description
shape	Define the shape of the gradient. It can be: ellipse (default): specifies the radial gradient of the ellipse circle: specifies the radial gradient of the circle
size	The specific position of the edge contour. It can be one of the following values: farthest-corner (default): specifies the radius length of the radial gradient from the center to the farthest corner. closest-side: specifies the radius length of the radial gradient from the center to the nearest edge. closest-corner: specifies the radius length of the radial gradient from the center to the nearest corner. farthest-side: opposite to closest-side: specifies the radius length of the radial gradient from the center to the farthest edge from the center.
position	The center position, similar to on and background-position or transform-origin. The default is "center"
start-color, ..., last-color	To specify the starting and ending colors of the gradient, you can use length values or percentages to specify the position of the starting and ending colors, but negative values are not allowed.

CSS Tutorial: CSS3 Gradient

CSS Function

CSS @charset Rule CSS Functions (Functions)