【心得】不同 gradient 使用方式-- conic-gradient()

我真的没想到渐层可以写这麽多篇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罗!!
使用方式跟前两者是一样的，这边就不再赘述了~一样要记得起始位置的设定