CSS - repeating-radial-gradient()

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

概述

颜色停止位置通过基本线性渐变长度的倍数进行偏移，每次重复一次。
如果颜色停止值不同，则可以在颜色停止之间看到清晰的视觉过渡，因为结束颜色停止的位置与开始颜色停止的位置重合。
repeating-radial-gradient 没有固有的尺寸，这意味着图像没有首选大小或纵横比。
图像的大小将与应用它的元素的大小匹配。
**<gradient>** 数据类型只能在使用 **<image>** 的地方使用。
**repeating-radial-gradient()** 函数不能与 **<color>** 数据类型和 background-color 等属性一起使用。

可能的值

重复径向渐变可以将以下值作为参数

1. **<position>**: 指定渐变的位置。当未指定值时，默认为 **<center>**。

2. **<shape>**: 值可以是 **circle**（渐变为具有恒定半径的圆形）或 **ellipse**（渐变为轴对齐的椭圆形）。当未指定值时，默认为 **ellipse**。

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>

打印页面