CSS - repeating-conic-gradient()

在 CSS 中，函式repeating-conic-gradient() 用於建立包含重複漸變的影像，其顏色過渡圍繞中心點旋轉。生成的影像是特殊的影像，其資料型別為<gradient>。

概述

當第一個和最後一個顏色停止點都不包含大於 0deg 或小於 360deg 的顏色停止角度時，圓錐形漸變不會重複。
圓錐形漸變沒有固有尺寸，這意味著影像沒有首選大小或縱橫比。
影像的大小將與應用它的元素的大小或影像的大小相匹配。
<gradient> 資料型別只能在使用<image> 的地方使用。
conic-gradient() 函式不能與<color> 資料型別和 background-color 等屬性一起使用。
為了建立不重複的圓錐形漸變，您需要使用 CSS 函式conic-gradient()，或者使漸變完成 360 度旋轉。

可能的值

函式repeating-conic-gradient() 可以將以下值作為引數：

1. <angle>：值指定順時針方向的漸變旋轉。將值作為角度，並以關鍵字from開頭。

2. <position>

確定漸變的中心。
使用與background-position 屬性相同的長度、順序和關鍵字。
未指定值時，預設值為center。

3. <angular-color-stop>：由顏色停止點的<color> 值以及一個或兩個可選的停止位置值組成，該位置是沿漸變圓周軸的角度。重複漸變的大小由最後一個顏色停止點減去第一個顏色停止點角度確定。

4. <color-hint>：確定相鄰顏色停止點之間的漸變進度。未指定值時，顏色過渡的中點是兩個顏色停止點之間的中點。

語法

   repeating-conic-gradient([from angle] [at position,] color degree, color degree, ...);

理解重複圓錐形漸變

repeating-conic-gradient 的語法類似於conic-gradient 和repeating-radial-gradient。顏色停止點位於漸變弧周圍。圓錐形漸變的重複部分的大小等於第一個顏色停止點減去最後一個顏色停止點的角度。

要使圓錐形漸變重複，您需要指定第一個和最後一個顏色停止點。顏色停止點位於圓的圓周上，而不是從漸變中心開始的漸變線上。

顏色過渡發生在圓的中心，從頂部開始（如果未指定from <angle>）並沿順時針方向進行。
圓錐形漸變透過指示旋轉角度、漸變中心以及最後指定顏色停止點列表來定義。
顏色停止點使用角度值放置，這與線性漸變和徑向漸變使用長度和百分比值不同。
用於指定值的單位是deg（度）、grad（梯度）、rad（弧度）和turn（圈）。一個圓包含 360 度、400 梯度、2π 弧度和 1 圈。
漸變位置的值類似於二維 background-position 的語法。
漸變的圓周是漸變的弧。漸變的起點是 12:00 或北方。漸變的旋轉由順時針方向的from角度確定。
有角度的顏色停止點及其起點和終點決定了漸變的顏色。使用相鄰顏色顏色停止點之間的顏色提示，您可以更改顏色之間的過渡。

支援重複圓錐形漸變的瀏覽器接受百分比值，其中 100% 等於 360 度。

漸變的自定義

漸變可以透過多種方式自定義。您可以新增更多有角度的顏色停止點到漸變弧上，使用<angle>更改顏色停止點的位置，透過顏色提示將顏色過渡中點移動到兩個顏色停止點之間的任何點等。
如果未定義顏色停止點的位置，則將其放置在其前面和後面顏色停止點之間的一半位置。
如果未為第一個或最後一個顏色停止點指定角度，則其值將分別為 0deg 和 360deg。
如果兩者都沒有定義角度，則結果為圓錐形漸變。
如果為第一個或最後一個顏色停止點指定非 0 或 360deg 值，則漸變將根據指定的值重複。
預設情況下，一個顏色停止點處的顏色將平滑地過渡到後續顏色停止點處的顏色。
透過新增顏色提示，可以將顏色過渡中點移動到兩個顏色停止點之間的任何點。
當兩個或多個顏色停止點位於相同位置時，第一個和最後一個顏色停止點之間的顏色過渡將是硬線。

建議不要混合和匹配不同的角度單位來建立 repeating-conic-gradient，因為這會使 CSS 難以讀取。

輔助功能問題：輔助技術對背景影像沒有太多特殊資訊，因為瀏覽器不會提供它們。圓錐形漸變表示的影像不會被螢幕閱讀器讀取或宣佈。因此，如果影像列出了關鍵資訊，建議對其進行語義描述。

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

這是一個重複圓錐形漸變的示例，其中定義了起始角度以及顏色停止點及其度數值。

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

   .repeat-conic-gradient {
      background: repeating-conic-gradient(
      from 0deg, 
      blue 0deg 45deg, 
      lightgreen 45deg 60deg);
   }
</style>
</head>
<body>
   <h1>Repeating Conic Gradient</h1>
   <div class="repeat-conic-gradient"></div>
</body>
</html>

CSS repeating-conic-gradient() - 帶星爆效果

這是一個帶有紅色和黑色星爆效果的重複圓錐形漸變示例。

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

   .repeat-conic {
      background-image: repeating-conic-gradient(red 0 19deg, black 19deg 28deg);
   }
</style>
</head>
<body>
   <h1>Repeating conic gradient</h1>
   <div class="repeat-conic"></div>
</body>
</html>

列印頁面