CSS 函数 - repeating-radial-gradient（）

在 CSS 中，函数 repeating-radial-gradient（） 允许您创建一个图像，该图像由作为背景图像的渐变组成，这些渐变被重复并从原点辐射。该函数类似于 radial-gradient（），因为它采用相同的参数，其中颜色停止在所有方向上无限重复自身以填充容器。生成的图像是 <gradient> 数据类型的特殊图像。

概述

每重复一次，色标的位置都会按基本线性渐变长度的倍数移动。
如果色标值不同，则在色标之间可以看到明显的视觉过渡，因为结束色标的位置与起始色标的位置重合。
重复径向渐变没有固有尺寸，这意味着图像没有首选的大小或纵横比。
图像的大小将与它适用的元素的大小匹配。
<gradient>数据类型只能在使用 <image> 的地方使用。
repeating-radial-gradient（） 函数不能与 <color>数据类型和 background-color 等属性一起使用。

可能的值

重复的径向梯度可以具有以下值作为参数：

1. <position>：指定渐变的位置。如果未指定任何值，则默认为 <center>。

2. <shape>：值可以是圆（渐变为半径恒定的圆）或椭圆（梯度为轴对齐的椭圆）。如果未指定任何值，则默认为椭圆。

3. <extent-keyword>：指定渐变结束形状的大小。渐变、圆圈和椭圆接受以下关键字作为其大小：

关键词	描述
closest-side	对于圆：渐变的结束形状与最靠近其中心的框的两侧相交。对于椭圆：渐变的结束形状与最接近中心的垂直边和水平边相交。
closest-corner	渐变的结束形状正好与盒子离其中心最近的角相交。
farthest-side	对于圆：渐变的结束形状与框的两侧相交，最远于框的中心。对于椭圆：渐变的结束形状与离中心最远的垂直边和水平边相交。
farthest-corner	渐变的结束形状恰好与盒子离其中心最远的角落相交。这是默认值。

4. <color-stop>：由色标的 <length> 值以及一个或两个可选的色标位置值组成。

止损位置值可以是 <percentage>，也可以是 <length> 值。
值等于 0% 或 0，表示梯度的中心。
值等于 100%，表示结束形状与虚拟渐变光线的交点。
介于两者之间的百分比值线性放置在虚拟梯度光线上。

语法


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

CSS repeating-radial-gradient（） - 最远的一侧

形状为椭圆且容器最远边的重复径向渐变示例：


<html>
<head>
<style>
	 	div {
	 	 	 height: 200px;
	 	 	 width: 400px;
	 	}

	 	.repeat-radial {
	 	 	 background: repeating-radial-gradient(
	 	 	 ellipse farthest-side at 20% 20%,
	 	 	 red,
	 	 	 black 5%,
	 	 	 yellow 5%,
	 	 	 blue 10%
	 	 	 );
	 	background: repeating-radial-gradient(
	 	 	 ellipse farthest-side at 20% 20%,
	 	 	 red 0 5%,
	 	 	 yellow 5% 10%
	 	 	 );
	 	}
</style>
</head>
<body>
	 	<h1>Repeating radial gradient</h1>
	 	<div class="repeat-radial"></div>
</body>
</html>

CSS repeating-radial-gradient（） - 最近侧

具有圆形形状和容器最近一侧的重复径向渐变示例：


<html>
<head>
<style>
	 	div {
	 	 	 height: 300px;
	 	 	 width: 300px;
	 	}

	 	.repeat-radial {
	 	 	 background: repeating-radial-gradient(
	 	 	 circle closest-side at 20% 20%,
	 	 	 black 5px,
	 	 	 black 15px,
	 	 	 yellow 25px,
	 	 	 yellow 25px
	 	 	 );
	 	}
</style>
</head>
<body>
	 	<h1>Repeating radial gradient</h1>
	 	<div class="repeat-radial"></div>
</body>
</html>

CSS repeating-radial-gradient（） - 最远的角

形状为椭圆且容器最远角的重复径向渐变示例：


<html>
<head>
<style>
	 	div {
	 	 	 height: 300px;
	 	 	 width: 300px;
	 	}

	 	.repeat-radial {
	 	 	 background: repeating-radial-gradient(
	 	 	 	 	ellipse farthest-corner at 20% 20%,
	 	 	 	 	red 0 5%,
	 	 	 	 	green 5% 10%
	 	
	 );
	 background: repeating-radial-gradient(
	 	 ellipse farthest-corner at 20% 20%,
	 	 	 red,
	 	 	 black 5%,
	 	 	 blue 5%,
	 	 	 green 10%
	 	 	 );
	 	}
</style>
</head>
<body>
	 	<h1>Repeating radial gradient</h1>
	 	<div class="repeat-radial"></div>
</body>
</html>

打印本页