如何為餅圖創建CSS圓錐梯度以及更多-css教學-PHP中文網

首頁

web前端

css教學

如何為餅圖創建CSS圓錐梯度以及更多

Joseph Gordon-Levitt

Feb 16, 2025 pm 12:08 PM

如何為餅圖創建CSS圓錐梯度以及更多

鑰匙要點

圓錐梯度開始獲得瀏覽器支持，可用於創建諸如餅圖和顏色輪子之類的效果。它們與徑向梯度不同，在該顏色停止沿圓的周長，而不是徑向線。
圓錐梯度的語法允許規範起點和中心位置。如果省略，這些默認值分別為零和中心。如果未指定，則假定第一個和最後一個顏色的顏色 - 停止角度為0DEG和360DEG。
圓錐梯度可用於通過為不同顏色提供硬色 - 停止值來創建餅圖。可以給出梯度的每種顏色的起點和末端角度，從而導致不同的部門的形成。有兩種指定這些顏色停止值的方法：將每種顏色的啟動角度設置為零，或將下一個顏色的起始角度等於上一個顏色的末端角度。
>

越來越多的網站以一種或另一種方式使用梯度。一些網站將它們用於導航組件，而另一些網站則將其用於按鈕等元素，或者使用圖像創建一些不錯的效果。

所有瀏覽器已經很長時間以來都支持基本CSS線性和徑向梯度。 CSS梯度：SitePoint上的語法速效課程文章可讓您快速摘要創建線性和徑向梯度所需的語法，以及如何使用重複梯度創建一些基本模式，如果您關心Web性能，這很棒並儘可能避免使用圖像。

> 在線性和徑向梯度之後，瀏覽器現在慢慢開始支持圓錐梯度，這是Lea Verou首先倡導的。

在本文中，您將了解有關簡單圓錐梯度和重複圓錐梯度的語法，使用和瀏覽器的支持。

什麼是圓錐梯度？

> 從指定的或默認點開始，作為繪製它們的圓的中心，它們都從指定的或默認點開始，

圓錐梯度和徑向梯度相似。兩者之間的區別在於，在徑向梯度的情況下，顏色擋塊沿著徑向線放置，而在圓錐梯度的情況下，顏色停止沿圓的圓周放置。

>可以根據百分比或程度指定圓錐梯度的顏色擋位置。 0％或0DEG的值是指圓錐梯度的頂部。當您順時針移動時，值會逐漸增加。 360兆位的值等於0DEG。任何顏色停止值大於100％或360級的顏色都不會在圓錐梯度上繪製，但仍會影響其顏色分佈。

>以下圖像顯示了一個圓錐梯度，該圓錐梯度以黃色開頭，並以橙色結尾。

很難不注意到將橙色在360攝氏度與0deg的黃色分開的急劇過渡。請記住，每當圓錐梯度的啟動和結束顏色都大不相同時，圓錐梯度總是會產生這種過渡。避免這種情況的一種方法是將啟動和結束顏色設置為相同的值。 >

圓錐梯度的語法

圓錐梯度允許您指定其起始角度及其中心位置。當省略這些值時，角度默認為零，位置默認為中心。這是圓錐梯度的語法：

如果未指定，則假定第一個和最後一個顏色的顏色平角分別為0deg和360度。可以使用以下任何版本創建上一節的黃色橙色圓錐梯度：>

而不是使用學位，也可以使用百分比。正如我之前提到的，100％的值等於360度。因此50％的值將等於180度。如果您確切地知道要用特定顏色覆蓋的圓圈的哪一部分，則使用百分比可能會更容易。同樣，也可以根據百分比指定圓錐梯度的中心位置。上述任何圓錐梯度值都將產生以下結果：

<span>conic-gradient([ from <angle> ]? [ at <position> ]?,  <angular-color-stop-list>)</angular-color-stop-list></position></angle></span>

請參閱codepen上的sitepoint（@sitepoint）創建圓錐梯度的筆

並非所有瀏覽器當前都支持圓錐梯度，因此我將在每個示例中包含一個參考圖像，以顯示最終結果應該是什麼樣的。

<span>background: conic-gradient(from 0deg at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at 50% 50%, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(from 0deg, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow, orange);</span>

使用圓錐梯度

>您可以使用圓錐梯度來創建不同種類的顏色輪轂。例如，以下演示使用圓錐梯度中彩虹的顏色來創建彩虹輪。

請注意，我如何將圓錐梯度的起始和末端顏色設置為紫羅蘭色，以避免突然過渡。

請參閱Codepen上的SitePoint（@sitepoint）的圓錐梯度的筆 -

使用CSS圓錐梯度進行餅圖

圓錐梯度的另一個好處是能夠輕鬆創建餅圖的能力。創建餅圖的過程實際上非常簡單。您所要做的就是為不同顏色提供一些硬顏色停止值。梯度的每種顏色都可以開始和末端角度。當下一種顏色的起始角值小於或等於當前顏色的末端角度值時，它們將以非常清晰，瞬時的顏色變化顯示，從而形成不同的扇區。

有兩種指定這些顏色停止值的方法。第一個是始終將每種顏色的啟動角度設置為零。

第二種方法是設置下一個顏色的啟動角，等於上一個顏色的末端角度。

您最終決定要做的是偏好問題。

以下代碼段顯示這兩種方法並排的圓錐梯度值以進行比較：

<span>conic-gradient([ from <angle> ]? [ at <position> ]?,  <angular-color-stop-list>)</angular-color-stop-list></position></angle></span>

>您可以省略最後顏色的第一個顏色和端角的起始角，因為默認情況下它們將分別設置為0％和100％：

請參閱codepen上的sitepoint（@sitepoint）的圓錐梯度的筆 -

上的餅圖

使用CSS圓錐梯度創建甜甜圈圖

創建甜甜圈圖只是用硬色 - 在元素上應用額外的徑向梯度的問題。可以將徑向梯度的內部顏色設置為白色，並且外部可以使外部透明。

請參閱codepen上的sitepoint（@sitepoint）的圓錐梯度的筆 -

<span>background: conic-gradient(from 0deg at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at 50% 50%, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(from 0deg, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow, orange);</span>

上的甜甜圈圖表

重複圓錐梯度

重複的圓錐梯度接受與常規圓錐梯度相同的所有值。唯一的區別是，這次將繼續重複自己，直到覆蓋整個360度為止。您可以使用此重複來創建一些以前需要使用圖像的常見圖像模式。

>您可以輕鬆地修改餅圖以創建類似Starburst的背景。您所要做的就是使用重複的循環梯度，並將每個顏色段的寬度減少一個合適的量。

<span>conic-gradient([ from <angle> ]? [ at <position> ]?,  <angular-color-stop-list>)</angular-color-stop-list></position></angle></span>

同樣，您可以通過將每個扇區的寬度設置為25％並設置背景大小，從而輕鬆地創建一個棋盤圖案。

>以下圖像顯示瞭如何在矩形或方形區域上延伸具有四個90度扇區的圓錐梯度可以創建棋盤：

這是CSS創建棋盤格模式的CSS：

<span>background: conic-gradient(from 0deg at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at 50% 50%, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(from 0deg, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow, orange);</span>

>請參閱codepen上的sitepoint（@sitepoint）的筆重複圓錐梯度。

>您可以通過改變不同扇區的大小以及更改梯度的角度來創建更多模式。

>瀏覽器支持和polyfills

在撰寫本文時，Chrome 59和“實驗Web平台功能”標誌後面的Opera 46支持Conic梯度。默認情況下或在某些標誌後面，沒有其他瀏覽器支持此新標準。這意味著您必須等待一點才能提供足夠的瀏覽器支持。

> 但是，您可以在Lea Verou創建的出色CSS Conic-Gradient（）Polyfill的幫助下，立即開始使用CSS圓錐梯度。還有一個Postcs圓錐梯度插件，該插件會自動將CONIC梯度後備添加到您的CSS文件中。

最終想法

>本教程向您展示瞭如何使用圓錐梯度創建PIE和DONUT圖表。之後，您了解瞭如何僅使用CSS創建不同的背景模式，並藉助重複圓錐梯度。一旦瀏覽器支持足夠好，您將不再需要依靠大型庫或圖像來完成這些任務。

要了解有關圓錐梯度的更多信息，請不要錯過這些資源：>

lea Verou的CSSCONF EU 2015

> CSS圖像值中的

圓錐梯度部分，並替換了內容模塊4

Lea Verou的初始草稿規範，其歷史可追溯至2011年。

>
> CSS圓錐梯度中的顏色停止值至關重要，因為它決定了梯度中每種顏色的位置。它表示為百分比或角度。例如，顏色停止值為25％或90度意味著顏色將分別在圓圈或90度的四分之一結束。操縱這些值可以使您創建唯一的梯度效果。

>如何在圓錐梯度中的顏色之間創建平滑的躍遷？

在圓錐梯度中的顏色之間創建平滑的過渡，您可以使用多個顏色 - 停路值。通過將顏色擋片關閉在一起，您可以在顏色之間創建平滑，逐漸的過渡。顏色段越近，過渡將越平滑。

>我可以使用CSS圓錐梯度創建餅圖嗎？怎麼樣？通過設置不同的顏色 - 停止值，您可以創建類似於餅圖的不同顏色的部分。然後，您可以使用這些部分來表示不同的數據點。

為什麼我的圓錐梯度在某些瀏覽器中未正確顯示？

>並非所有瀏覽器都支持CSS圓錐梯度。例如，Internet Explorer和Microsoft Edge的某些版本不支持它們。為確保您的漸變在所有瀏覽器中正確顯示，請考慮使用後背背景顏色或多填充。 CSS徑向梯度在中心點輻射的梯度產生了從中心點輻射的梯度。要創建徑向梯度，您將使用radial-gradient（）函數而不是圓錐級函數。可以使用帶有圓錐梯度的CSS變量。這使您可以創建更具動態和靈活的樣式。您可以定義具有特定值的CSS變量，然後在圓錐梯度中使用該變量。

>我如何對CSS圓錐梯度進行動畫？