对于渐变实际我们已经接触过，像什么线性渐变linear-gradient啦，还有径向渐变radial-gradient啦 我们来看一下使用默认渐变方式做一个四色渐变：红色-粉色-黄色-天蓝色。
当然，我们这次的重点并不是这线性渐变和径向渐变，而是一个第三个图中的锥形渐变conic-gradient，顾名思义，锥形锥形，就是渐变的图案像圆锥，下面这张图可以完美的展示出锥形渐变与径向渐变的差别。
现在就来正式学习一下吧。
锥形渐变的语法
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 )，像另外两个渐变一样，我们可以设置每个颜色的"起始位置"，以红色-粉色两个颜色的渐变举例
大家可以发现，图二中设置了pink为45deg，并不是代表渐变的起始角度，而是在45度时，到达我们设置的粉色最深色
图三设置的12.5%与图二的45deg效果相等，这个百分比的代表，一圈为360度，45度就是12.5%
那，如果前一个色与后一个色的颜色角度相等会出现什么效果呢
background: conic-gradient(red 180deg, pink 180deg);
既然这样，我们就可以使用锥形渐变做出一个饼图效果
锥形渐变的应用-饼图
利用颜色起始、结束色的角度或百分比我们可以做出一个饼图效果
但很明显，这样每一个颜色都需要计算角度是比较麻烦的事情，这时我们可以使用渐变断点的一个特性：当后面的渐变断点位置比前面的断点位置小的时候，会自动按照前面较大的断点位置渲染，也就是说我们可以直接简单的设置为
background: conic-gradient(red 40%, pink 0deg 60%, yellow 0deg);
写在最后
这篇文章只是大致的介绍了一下锥形渐变最简单的用法，在实际应用当中我们可以更加灵活使用
比如：
将多种渐变结合在一起，实现特殊形状效果
把锥形渐变结合动画实现炫酷的按钮动画
更多关于前端培训的问题，欢迎咨询千锋教育在线名师，如果想要了解我们的师资、课程、项目实操的话可以点击咨询课程顾问，获取试听资格来试听我们的课程，在线零距离接触千锋教育大咖名师，让你轻松从入门到精通。
注：本文部分文字和图片来源于网络，如有侵权，请联系删除。版权归原作者所有!
京公网安备 11010802030320号