我真的沒想到漸層可以寫這麼多篇XD
本來預期是一篇就可以結束...

結果開始研究發現，不得了阿這個屬性怎麼這麼滴猛
對熱愛漸層效果的人來說吸起來比貓還過癮(因為貓會打我，gradient不費兒)

廢話不多說，來看今天的主角 ~~ conic-gradient()

conic-gradient()

background: conic-gradient(
    from 角度 at 中心位置,
    顏色 色彩角度,
    顏色 色彩角度,
    顏色 色彩角度,
    ...);

這個漸層效果是圍繞著中心點轉圈圈進行漸層效果的，因此色彩位置的單位不再是以px為單位(MDN上面說，雖然接受%為單位，但這並不在規範中)

Browsers supporting conic gradients also accept percent values, with 100% equaling 360 degrees, but this is not in the specification.

聽起來跟radial-gradient 有點像，但radial-gradient 是一圈一圈的從中心向外延伸，請看看MDN的圖示，非常好的說明了兩者的差異

角度

若無進行特別設定則預設從 0 度(12點鐘方向)開始

• deg
• turn
• rad
• turn
  
  延伸閱讀：《MDN-angle》

中心位置

• center (預設)
• (top / bottom / left / right)
• (top/bottom/left/right/center)　(top/bottom/left/right/center)
• px
• %

顏色：

• RGB
• RGBA
• HSL
• HSLA
• 關鍵字(red / blue / yellow / transparent...)

色彩位置：

• deg
• turn
• rad
• turn
• ( % )

不設定角度的話會平均分配

跟linear-gradient、radial-gradient特性相似

把第一個色彩設定大於起始角度，會自動填滿 起始角度~設定的值間的範圍
把最後一個色彩小於360deg時，會自動填滿設定的值~360度間的範圍

用%為單位的話，100% = 360deg

設定兩個位置的話...就可做成圓餅圖了呀!!

但這種製圖方式沒辦法讓瀏覽器判讀出他的內容(๑•́ ₃ •̀๑)

repeating-conic-gradient()

跟linear-gradient、radial-gradient都有repeating-linear-gradient、repeating-radial-gradient
conic-gradient當然也有repeating-conic-gradient囉!!
使用方式跟前兩者是一樣的，這邊就不再贅述了~一樣要記得起始位置的設定

codepen實作
參考資料：https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient()