其他分享
首页 > 其他分享> > 锥形渐变conic-gradient你了解多少?

锥形渐变conic-gradient你了解多少?

作者:互联网

      渐变效果在开发中我们可能会经常使用到,像什么线性渐变linear-gradient啦,还有径向渐变radial-gradient,但今天我们讲的是锥形渐变conic-gradient。

锥形渐变1

      当然,我们这次的重点并不是这线性渐变和径向渐变,而是一个第三个图中的锥形渐变conic-gradient,顾名思义,锥形锥形,就是渐变的图案像圆锥,下面这张图可以完美的展示出锥形渐变与径向渐变的差别

锥形渐变2

      锥形渐变的语法

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

      1、起始角度 angle

      可选项,角度前加from关键字,代表以此角度为起始,使用顺时针方向进行渐变旋转,例

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

angle

      2、中心位置 position

      可选项,位置前加at关键字,可设置锥形渐变的中心位置,设置值与background-position相同,例

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

position

      默认情况下,锥形渐变的中心点为正中心,而设置position后,值都是以盒子的左上角起点开始计算,但是不建议使用bottom top left right关键字,为啥,看看下图就晓得了

注意

      当起始角度 angle与中心位置position同时存在时一定记得不要加逗号!!

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

注意效果

      3、颜色断点 angular-color-stop-list

      上方我们用的案例都是直接使用( red, pink ),像另外两个渐变一样,我们可以设置每个颜色的"起始位置",以红色-粉色两个颜色的渐变举例

锥形渐变3

      大家可以发现,图二中设置了pink为45deg,并不是代表渐变的起始角度,而是在45度时,到达我们设置的粉色最深色,图三设置的12.5%与图二的45deg效果相等,这个百分比的代表,一圈为360度,45度就是12.5%

      那,如果前一个色与后一个色的颜色角度相等会出现什么效果呢

锥形渐变4

      锥形渐变的应用-饼图

      利用颜色起始、结束色的角度或百分比我们可以做出一个饼图效果

饼图1

      但很明显,这样每一个颜色都需要计算角度是比较麻烦的事情,这时我们可以使用渐变断点的一个特性:当后面的渐变断点位置比前面的断点位置小的时候,会自动按照前面较大的断点位置渲染,也就是说我们可以直接简单的设置为

饼图2


本文来自千锋教育,转载请注明出处

标签:pink,gradient,渐变,锥形,conic,断点
来源: https://blog.51cto.com/u_15128693/2772842