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>

列印頁面