漸變效果在開發(fā)中我們可能會經(jīng)常使用到，像什么線性漸變linear-gradient啦，還有徑向漸變r(jià)adial-gradient，但今天我們講的是錐形漸變conic-gradient。

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

      錐形漸變的語法

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

      1、起始角度 angle

      可選項(xiàng)，角度前加from關(guān)鍵字，代表以此角度為起始，使用順時(shí)針方向進(jìn)行漸變旋轉(zhuǎn)，例

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

      2、中心位置 position

      可選項(xiàng)，位置前加at關(guān)鍵字，可設(shè)置錐形漸變的中心位置，設(shè)置值與background-position相同，例

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

      默認(rèn)情況下，錐形漸變的中心點(diǎn)為正中心，而設(shè)置position后，值都是以盒子的左上角起點(diǎn)開始計(jì)算，但是不建議使用bottom top left right關(guān)鍵字，為啥，看看下圖就曉得了

      當(dāng)起始角度 angle與中心位置position同時(shí)存在時(shí)一定記得不要加逗號?。?/p>

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

      3、顏色斷點(diǎn) angular-color-stop-list

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

      大家可以發(fā)現(xiàn)，圖二中設(shè)置了pink為45deg，并不是代表漸變的起始角度，而是在45度時(shí)，到達(dá)我們設(shè)置的粉色最深色，圖三設(shè)置的12.5%與圖二的45deg效果相等，這個(gè)百分比的代表，一圈為360度，45度就是12.5%

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

      錐形漸變的應(yīng)用-餅圖

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

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

      最后歡迎對web前端開發(fā)感興趣的同學(xué)來到千鋒大前端培訓(xùn)班參加我們的前端開發(fā)學(xué)習(xí)課程，更有兩周免費(fèi)試聽的機(jī)會，不滿意不繳費(fèi)，歡迎同學(xué)們前來試聽考察。