CSS - conic-gradient() 函式

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

之所以命名為 conic，是因為由於顏色停止在一側比另一側更亮，所以從上面看影像看起來像一個圓錐體。

概述

conic-gradient 沒有內在尺寸，這意味著影像沒有首選大小或縱橫比。
影像的大小將與應用它的元素的大小或影像本身的大小相匹配。
<gradient> 資料型別只能在使用<image> 的地方使用。
conic-gradient() 函式不能與<color> 資料型別和 background-color 等屬性一起使用。
為了建立一個重複自身的 conic-gradient，需要使用 CSS 函式repeating-conic-gradient()，它填充 360 度旋轉。

可能的值

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

1. <angle>：值以順時針方向指定漸變旋轉。將值作為角度，並在前面加上關鍵字 from。

2. <position>

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

3. <angular-color-stop>：由顏色停止的<color> 值以及一個或兩個可選的停止位置值組成，該值是沿漸變圓周軸的角度。

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

語法

<conic-gradient()> = 
  conic-gradient( [ [ from <angle> ]? [ at <position> ]? ] || , 
  <color-interpolation-method> , <angular-color-stop-list> )

CSS conic-gradient() - 構成

圓錐漸變是在漸變弧（圓的圓周）周圍而不是在從漸變中心開始的漸變線上兩個或多個顏色的漸進過渡。

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

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

CSS conic-gradient() - 自定義

漸變可以透過多種方式自定義。可以在漸變弧上新增更多有角度的顏色停止點，使用<angle>更改顏色停止的位置，透過顏色提示將顏色過渡中點移動到兩個顏色停止之間的任意點等。

顏色停止的列表應按升序排列。較低值的後續顏色停止會覆蓋先前顏色停止的值，從而導致硬過渡。

使用圓錐漸變不僅可以建立圓形圖形，還可以建立棋盤格。

CSS conic-gradient() - 基本示例

為了建立一個基本的圓錐漸變，只需要兩種顏色。預設情況下，漸變的中心位於 50% 50% 標記處；漸變的起點朝上。讓我們看一個例子

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

   .basic-conic-gradient {
      background: conic-gradient(red, yellow);
      border-radius: 50%;
   }
</style>
</head>
<body>
   <h1>Basic Conic Gradient</h1>
   <div class="basic-conic-gradient"></div>
</body>
</html>

CSS conic-gradient() - 中心位置

可以使用關鍵字、百分比或絕對長度以及關鍵字at來定位圓錐漸變的中心。讓我們看一個例子

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

   .position-center-gradient {
      background: conic-gradient(at 0% 20%, red 10%, gold 40%, green 50%);
   }
</style>
</head>
<body>
   <h1>Position Center Gradient</h1>
   <div class="position-center-gradient"></div>
</body>
</html>

CSS conic-gradient() - 角度更改

以下是角度更改的示例。

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

   .angle-change-gradient {
      background: conic-gradient(from 35deg, red 10%, gold 50%, green 75%, lightgreen);
      border-radius: 30%;
   }
</style>
</head>
<body>
   <h1>Angle Change Gradient</h1>
   <div class="angle-change-gradient"></div>
</body>
</html>

有關 conic-gradient() 的更多示例，請單擊此處。

列印頁面