對于漸變實際我們已經(jīng)接觸過，像什么線性漸變linear-gradient啦，還有徑向漸變radial-gradient啦 我們來看一下使用默認漸變方式做一個四色漸變：紅色-粉色-黃色-天藍色。

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

　　現(xiàn)在就來正式學習一下吧。

　　錐形漸變的語法

　　1、起始角度 angle

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

　　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 )，像另外兩個漸變一樣，我們可以設置每個顏色的"起始位置"，以紅色-粉色兩個顏色的漸變舉例

　　大家可以發(fā)現(xiàn)，圖二中設置了pink為45deg，并不是代表漸變的起始角度，而是在45度時，到達我們設置的粉色最深色

　　圖三設置的12.5%與圖二的45deg效果相等，這個百分比的代表，一圈為360度，45度就是12.5%

　　那，如果前一個色與后一個色的顏色角度相等會出現(xiàn)什么效果呢

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

　　既然這樣，我們就可以使用錐形漸變做出一個餅圖效果

　　錐形漸變的應用-餅圖

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

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

　　background: conic-gradient(red 40%, pink 0deg 60%, yellow 0deg);

　　寫在最后

　　這篇文章只是大致的介紹了一下錐形漸變最簡單的用法，在實際應用當中我們可以更加靈活使用

　　比如：

　　將多種漸變結合在一起，實現(xiàn)特殊形狀效果

　　把錐形漸變結合動畫實現(xiàn)炫酷的按鈕動畫

　　更多關于前端培訓的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問，獲取試聽資格來試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。

　　注：本文部分文字和圖片來源于網(wǎng)絡，如有侵權，請聯(lián)系刪除。版權歸原作者所有!