CSS - repeating-linear-gradient()

在 CSS 中，函式 **repeating-linear-gradient()** 用於建立由重複線性漸變組成的影像。此函式類似於 **linear-gradient()**，因為它採用相同的引數，顏色停止點會在所有方向無限重複以填充容器。生成的影像是 **<gradient>** 資料型別的特殊影像。

概述

第一個和最後一個顏色停止點之間的距離決定了重複漸變的長度。
當第一個顏色停止點沒有指定顏色停止長度時，它預設為 0。
顏色停止點的位置會隨著每次重複而按基本線性漸變長度的倍數進行偏移。
如果顏色停止值不同，當結束顏色停止點的位置與起始顏色停止點的位置重合時，可以在顏色停止點之間看到清晰的視覺過渡。
repeating-linear-gradient 沒有內在尺寸，這意味著影像沒有首選大小或縱橫比。
影像的大小將與其應用到的元素的大小匹配。
**<gradient>** 資料型別只能在使用 **<image>** 的地方使用。
**repeating-linear-gradient()** 函式不能與 **<color>** 資料型別和 background-color 等屬性一起使用。

可能的值

函式 **repeating-linear-gradient()** 可以以下列值作為引數

1. **<side-or-corner>**

確定漸變的起點。
包含單詞 **to** 和最多兩個關鍵詞，一個表示水平方向（left 或 right），另一個表示垂直方向（top 或 bottom）。
側邊關鍵詞的順序可以是任何順序。
如果未指定值，則預設值為 **to bottom**。
**to top、to bottom、to left** 和 **to right** 的等效值為 **0deg、180deg、270deg** 和 **90deg**。
**<angle>** 值沿順時針方向遞增。

2. **<linear-color-stop>**: 由顏色停止點的 **<color>** 值以及一個或兩個可選的停止位置值組成。停止位置值可以是 **<percentage>** 或 **<length>** 值。0% 或 0 值表示漸變的起點；而 100% 值表示漸變不再重複時影像尺寸的 100%。

3. **<color-hint>**: 確定相鄰顏色停止點之間的漸變進度。如果未指定值，則顏色過渡的中點是兩個顏色停止點之間的中點。

語法

repeating-linear-gradient(
    angle | to side-or-corner, color-stop1, color-stop2,...);

CSS repeating-linear-gradient() - 角度值

傾斜 60 度，具有三個顏色停止點的重複漸變示例

<html>
<head>
<style>
   div {
      height: 200px;
      width: 400px;
   }
   /* A repeating gradient tilted 60 degrees,
   with three color stops */
   .repeat-linear {
      background-image: repeating-linear-gradient(60deg, red, yellow 7%, black 10%);
   }
</style>
</head>
<body>
   <h1>Repeating linear gradient</h1>
   <div class="repeat-linear"></div>
</body>
</html>

CSS repeating-linear-gradient() - 從右下到左上

從右下到左上的重複漸變示例。

<html>
<head>
<style>
   div {
      height: 200px;
      width: 400px;
   }
   /* A repeating gradient going from the bottom right to the top left */
   .repeat-linear {
      background-image: repeating-linear-gradient(to left top, red, yellow 20px, black 20%);
   }
</style>
</head>
<body>
   <h1>Repeating linear gradient</h1>
   <div class="repeat-linear"></div>
</body>
</html>

CSS repeating-linear-gradient() - 不重複

線性漸變示例，其中漸變不重複，因為最後一個顏色停止點預設為 100%

<html>
<head>
<style>
   div {
      height: 200px;
      width: 400px;
   }
   /* A gradient going from the bottom to top,
   starting red, turning yellow after 40%,
   and finishing green. This gradient doesn't repeat because
   the last color stop defaults to 100% */
   .repeat-linear {
      background-image: repeating-linear-gradient(0deg, red, yellow 40%, green);
   }
</style>
</head>
<body>
   <div class="repeat-linear"></div>
</body>
</html>

列印頁面