标签：pink gradient 渐变 锥形 conic 断点

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

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

      锥形渐变的语法

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

      1、起始角度 angle

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

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

      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%

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

      锥形渐变的应用-饼图

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

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

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。