CSS 函数

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

概述

  • 每次重复时，色标的位置都会移动基本线性渐变长度的倍数。

  • 如果色标值不同，可以在色标之间看到清晰的视觉过渡，因为结束色标的位置与起始色标的位置一致。

  • 重复径向渐变具有无固有尺寸，这意味着图像没有首选尺寸或长宽比。

  • 图像的尺寸将与其应用的元素的尺寸相匹配。

  • <gradient> 数据类型只能在 使用 <image>。

  • repeating-radial-gradient() 函数不能与 <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(): Farthest-Side

重复径向渐变示例椭圆形和容器的最远边:

<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>重复径向渐变</h1>
   <div class="repeat-radial"></div>
</body>
</html>

CSS Repeating-radial-gradient(): closest-side

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

<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>重复径向渐变</h1>
   <div class="repeat-radial"></div>
</body>
</html>

CSS Repeating-radial-gradient(): farthest-corner

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

<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>重复径向渐变</h1>
   <div class="repeat-radial"></div>
</body>
</html>