前端技術分享：錐形漸變conic-gradient你瞭解多少？

      漸變效果在開發中我們可能會經常使用到，像什麼線性漸變linear-gradient啦，還有徑向漸變radial-gradient，但今天我們講的是錐形漸變conic-gradient。

      當然，我們這次的重點並不是這線性漸變和徑向漸變，而是一個第三個圖中的錐形漸變conic-gradient，顧名思義，錐形錐形，就是漸變的圖案像圓錐，下面這張圖可以完美的展示出錐形漸變與徑向漸變的差別

      錐形漸變的語法

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

      1、起始角度 angle

      可選項，角度前加from關鍵字，代表以此角度為起始，使用順時針方向進行漸變旋轉，例

      background: conic-gradient(from 45deg, red, pink);

      2、中心位置 position

      可選項，位置前加at關鍵字，可設定錐形漸變的中心位置，設定值與background-position相同，例

      background: conic-gradient(at 25% 25%, red, pink);

      預設情況下，錐形漸變的中心點為正中心，而設定position後，值都是以盒子的左上角起點開始計算，但是不建議使用bottom top left right關鍵字，為啥，看看下圖就曉得了

      當起始角度 angle與中心位置position同時存在時一定記得不要加逗號！！

      background: conic-gradient(from 45deg at 25% 25%, red, pink);

      3、顏色斷點 angular-color-stop-list

      上方我們用的案例都是直接使用( red, pink )，像另外兩個漸變一樣，我們可以設定每個顏色的"起始位置"，以紅色-粉色兩個顏色的漸變舉例

      大家可以發現，圖二中設定了pink為45deg，並不是代表漸變的起始角度，而是在45度時，到達我們設定的粉色最深色，圖三設定的12.5%與圖二的45deg效果相等，這個百分比的代表，一圈為360度，45度就是12.5%

      那，如果前一個色與後一個色的顏色角度相等會出現什麼效果呢

      錐形漸變的應用-餅圖

      利用顏色起始、結束色的角度或百分比我們可以做出一個餅圖效果

      但很明顯，這樣每一個顏色都需要計算角度是比較麻煩的事情，這時我們可以使用漸變斷點的一個特性：當後面的漸變斷點位置比前面的斷點位置小的時候，會自動按照前面較大的斷點位置渲染，也就是說我們可以直接簡單的設定為

      希望以上的分享能幫到大家！還想了解前端哪方面的知識，歡迎在下面留言喲！。