鑰匙要點(diǎn)

由Lea Verou倡導(dǎo)的
• 圓錐梯度開(kāi)始獲得瀏覽器支持，可用於創(chuàng)建諸如餅圖和顏色輪子之類(lèi)的效果。它們與徑向梯度不同，在該顏色停止沿圓的周長(zhǎng)，而不是徑向線。
。
• 圓錐梯度的語(yǔ)法允許規(guī)範(fàn)起點(diǎn)和中心位置。如果省略，這些默認(rèn)值分別為零和中心。如果未指定，則假定第一個(gè)和最後一個(gè)顏色的顏色 - 停止角度為0DEG和360DEG。
• 圓錐梯度可用於通過(guò)為不同顏色提供硬色 - 停止值來(lái)創(chuàng)建餅圖?？梢越o出梯度的每種顏色的起點(diǎn)和末端角度，從而導(dǎo)致不同的部門(mén)的形成。有兩種指定這些顏色停止值的方法：將每種顏色的啟動(dòng)角度設(shè)置為零，或?qū)⑾乱粋€(gè)顏色的起始角度等於上一個(gè)顏色的末端角度。
重複圓錐梯度接受與常規(guī)圓錐梯度相同的值，但重複直到覆蓋整個(gè)360度。這可以用於創(chuàng)建以前需要使用圖像的常見(jiàn)圖像模式。
• >

越來(lái)越多的網(wǎng)站以一種或另一種方式使用梯度。一些網(wǎng)站將它們用於導(dǎo)航組件，而另一些網(wǎng)站則將其用於按鈕等元素，或者使用圖像創(chuàng)建一些不錯(cuò)的效果。

>

所有瀏覽器已經(jīng)很長(zhǎng)時(shí)間以來(lái)都支持基本CSS線性和徑向梯度。 CSS梯度：SitePoint上的語(yǔ)法速效課程文章可讓您快速摘要?jiǎng)?chuàng)建線性和徑向梯度所需的語(yǔ)法，以及如何使用重複梯度創(chuàng)建一些基本模式，如果您關(guān)心Web性能，這很棒並儘可能避免使用圖像。

> 在線性和徑向梯度之後，瀏覽器現(xiàn)在慢慢開(kāi)始支持圓錐梯度，這是Lea Verou首先倡導(dǎo)的。

在本文中，您將了解有關(guān)簡(jiǎn)單圓錐梯度和重複圓錐梯度的語(yǔ)法，使用和瀏覽器的支持。

什麼是圓錐梯度？

> 從指定的或默認(rèn)點(diǎn)開(kāi)始，作為繪製它們的圓的中心，它們都從指定的或默認(rèn)點(diǎn)開(kāi)始，

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

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

>以下圖像顯示了一個(gè)圓錐梯度，該圓錐梯度以黃色開(kāi)頭，並以橙色結(jié)尾。

很難不注意到將橙色在360攝氏度與0deg的黃色分開(kāi)的急劇過(guò)渡。請(qǐng)記住，每當(dāng)圓錐梯度的啟動(dòng)和結(jié)束顏色都大不相同時(shí)，圓錐梯度總是會(huì)產(chǎn)生這種過(guò)渡。避免這種情況的一種方法是將啟動(dòng)和結(jié)束顏色設(shè)置為相同的值。 >

圓錐梯度的語(yǔ)法

圓錐梯度允許您指定其起始角度及其中心位置。當(dāng)省略這些值時(shí)，角度默認(rèn)為零，位置默認(rèn)為中心。這是圓錐梯度的語(yǔ)法：

如果未指定，則假定第一個(gè)和最後一個(gè)顏色的顏色平角分別為0deg和360度?？梢允褂靡韵氯魏伟姹緞?chuàng)建上一節(jié)的黃色橙色圓錐梯度：>

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

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

請(qǐng)參閱codepen上的sitepoint（@sitepoint）創(chuàng)建圓錐梯度的筆

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

<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>

使用圓錐梯度

>您可以使用圓錐梯度來(lái)創(chuàng)建不同種類(lèi)的顏色輪轂。例如，以下演示使用圓錐梯度中彩虹的顏色來(lái)創(chuàng)建彩虹輪。

請(qǐng)注意，我如何將圓錐梯度的起始和末端顏色設(shè)置為紫羅蘭色，以避免突然過(guò)渡。

請(qǐng)參閱Codepen上的SitePoint（@sitepoint）的圓錐梯度的筆 -

使用CSS圓錐梯度進(jìn)行餅圖

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

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

第二種方法是設(shè)置下一個(gè)顏色的啟動(dòng)角，等於上一個(gè)顏色的末端角度。

您最終決定要做的是偏好問(wèn)題。

>

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

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

>您可以省略最後顏色的第一個(gè)顏色和端角的起始角，因?yàn)槟J(rèn)情況下它們將分別設(shè)置為0％和100％：

請(qǐng)參閱codepen上的sitepoint（@sitepoint）的圓錐梯度的筆 -

上的餅圖

使用CSS圓錐梯度創(chuàng)建甜甜圈圖

創(chuàng)建甜甜圈圖只是用硬色 - 在元素上應(yīng)用額外的徑向梯度的問(wèn)題?？梢詫较蛱荻鹊膬?nèi)部顏色設(shè)置為白色，並且外部可以使外部透明。

請(qǐng)參閱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>

上的甜甜圈圖表

重複圓錐梯度

重複的圓錐梯度接受與常規(guī)圓錐梯度相同的所有值。唯一的區(qū)別是，這次將繼續(xù)重複自己，直到覆蓋整個(gè)360度為止。您可以使用此重複來(lái)創(chuàng)建一些以前需要使用圖像的常見(jiàn)圖像模式。

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

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

同樣，您可以通過(guò)將每個(gè)扇區(qū)的寬度設(shè)置為25％並設(shè)置背景大小，從而輕鬆地創(chuàng)建一個(gè)棋盤(pán)圖案。

>以下圖像顯示瞭如何在矩形或方形區(qū)域上延伸具有四個(gè)90度扇區(qū)的圓錐梯度可以創(chuàng)建棋盤(pán)：

這是CSS創(chuàng)建棋盤(pán)格模式的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>

>請(qǐng)參閱codepen上的sitepoint（@sitepoint）的筆重複圓錐梯度。

>您可以通過(guò)改變不同扇區(qū)的大小以及更改梯度的角度來(lái)創(chuàng)建更多模式。

>瀏覽器支持和polyfills

在撰寫(xiě)本文時(shí)，Chrome 59和“實(shí)驗(yàn)Web平臺(tái)功能”標(biāo)誌後面的Opera 46支持Conic梯度。默認(rèn)情況下或在某些標(biāo)誌後面，沒(méi)有其他瀏覽器支持此新標(biāo)準(zhǔn)。這意味著您必須等待一點(diǎn)才能提供足夠的瀏覽器支持。

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

最終想法

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

要了解有關(guān)圓錐梯度的更多信息，請(qǐng)不要錯(cuò)過(guò)這些資源：>

lea Verou的CSSCONF EU 2015

> CSS圖像值中的

圓錐梯度部分，並替換了內(nèi)容模塊4

>

Lea Verou的初始草稿規(guī)範(fàn)，其歷史可追溯至2011年。

>您可以建議網(wǎng)絡(luò)上的圓錐梯度任何獨(dú)特的用途嗎？在評(píng)論中讓我們知道。
經(jīng)常詢問(wèn)有關(guān)CSS圓錐梯度和餅圖的問(wèn)題（常見(jiàn)問(wèn)題解答）
• >
> CSS圓錐梯度中顏色停止值的重要性是什麼？
• > CSS圓錐梯度中的顏色停止值至關(guān)重要，因?yàn)樗鼪Q定了梯度中每種顏色的位置。它表示為百分比或角度。例如，顏色停止值為25％或90度意味著顏色將分別在圓圈或90度的四分之一結(jié)束。操縱這些值可以使您創(chuàng)建唯一的梯度效果。

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

在圓錐梯度中的顏色之間創(chuàng)建平滑的過(guò)渡，您可以使用多個(gè)顏色 - 停路值。通過(guò)將顏色擋片關(guān)閉在一起，您可以在顏色之間創(chuàng)建平滑，逐漸的過(guò)渡。顏色段越近，過(guò)渡將越平滑。

>我可以使用CSS圓錐梯度創(chuàng)建餅圖嗎？怎麼樣？通過(guò)設(shè)置不同的顏色 - 停止值，您可以創(chuàng)建類(lèi)似於餅圖的不同顏色的部分。然後，您可以使用這些部分來(lái)表示不同的數(shù)據(jù)點(diǎn)。

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

>並非所有瀏覽器都支持CSS圓錐梯度。例如，Internet Explorer和Microsoft Edge的某些版本不支持它們。為確保您的漸變?cè)谒袨g覽器中正確顯示，請(qǐng)考慮使用後背背景顏色或多填充。 CSS徑向梯度在中心點(diǎn)輻射的梯度產(chǎn)生了從中心點(diǎn)輻射的梯度。要?jiǎng)?chuàng)建徑向梯度，您將使用radial-gradient（）函數(shù)而不是圓錐級(jí)函數(shù)。可以使用帶有圓錐梯度的CSS變量。這使您可以創(chuàng)建更具動(dòng)態(tài)和靈活的樣式。您可以定義具有特定值的CSS變量，然後在圓錐梯度中使用該變量。

>

>我如何對(duì)CSS圓錐梯度進(jìn)行動(dòng)畫(huà)？

>您可以通過(guò)使用CSS CONIC梯度動(dòng)畫(huà)CSS動(dòng)畫(huà)或過(guò)渡。例如，您可以對(duì)梯度的旋轉(zhuǎn)進(jìn)行動(dòng)畫(huà)，或者使顏色停止值動(dòng)畫(huà)以創(chuàng)建隨時(shí)間變化的漸變。

我可以在CSS圓錐梯度中使用透明顏色嗎？ >是的，您可以在CSS圓錐梯度中使用透明的顏色。這可以創(chuàng)建有趣的視覺(jué)效果，例如逐漸淡入透明度的梯度。

>

>如何創(chuàng)建一個(gè)重複的圓錐梯度？

創(chuàng)建重複的圓錐梯度，您可以使用重複 - 圓錐分子（）函數(shù)。這使您可以創(chuàng)建一個(gè)梯度模式，該圖案在圓圈周?chē)匮}。

>我可以將CSS圓錐梯度與其他CSS屬性使用嗎？例如，您可以將圓錐梯度用作文本元素的背景，然後將其他CSS屬性應(yīng)用於該文本，例如顏色，字體大小和文本shadow。

以上是如何為餅圖創(chuàng)建CSS圓錐梯度以及更多的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！