前端技术分享：锥形渐变conic-gradient你了解多少？

渐变效果在开发中我们可能会经常使用到，像什么线性渐变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%

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

锥形渐变的应用-饼图

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

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

希望以上的分享能帮到大家！还想了解前端哪方面的知识，欢迎在下面留言哟！

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

前端技术分享：锥形渐变conic-gradient你了解多少？相关推荐

好程序员web前端技术分享媒体查询
为什么80%的码农都做不了架构师?>>> 好程序员web前端技术分享媒体查询什么是媒体查询媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向 ...
前端技术分享之HTMLHTML5
前端技术分享之HTML&&HTML5 HTML 发展历史 HTML文档模式标准模式 HTML 4.01 严格型 XHTML 1.0 严格型 HTML 5 准标准模式 HTML 4.0 ...
Web前端技术分享：学习HTML和CSS的5大理由
人们学习HTML和CSS最常见的原因是开始从事Web开发.但并不是只有Web开发人员才要学习HTML和CSS的核心技术.作为一个网络用户,你需要你掌握的相关技术很多,但下面小千总结了5个你无法拒绝学习 ...
web前端技术分享：前端开发与后端开发的区别是什么？
相信很多人在技术岗都听到过前端和后端这两个职位,但是大部分人对前端开发与后端开发的区别是什么?并不是很清楚,下面小千就为大家详细的介绍一下两者的区别之处. web前端分享:前端开发与后端开发的区别是什 ...
30个前端技术分享主题
这是我们团队前30期的前端内部技术分享主题,我做的是第1.10.19期的分享,仅供大家参考
2019年长沙前端技术分享大会圆满成功
做一个积极的人编码.改bug.提升自己我有一个乐园,面向编程,春暖花开! 本文首发: 唐胡子俱乐部,授权发布! 摘要长沙百名互联网前端程序员齐聚长沙互联网活动基地(唐胡子俱乐部). 主办单位:唐 ...
web前端技术分享：web前端的求职前景好不好？
想要进军互联网行业,大部分人会选择web前端和web前端这两个技术,因为两者之间的发展前景是非常好的.下面我们就先来了解一下web前端的求职前景好不好? web前端的求职前景好不好?近几年的热门行业里 ...
前端技术分享之3/8女神节抽奖活动
一.活动背景作为一家团队文化氛围浓厚的公司,每年的3/8女神节活动那是必不可少的. 一般来说,这样的活动想要收到足够的效果,那高密度的人员聚集是必不可少的(比如去年就组织了大型送玫瑰花活动加现场抽奖 ...
Web前端技术分享：全栈工程师常用的开发工具
全栈工程师,也叫全端工程师,是指掌握多种技能,并能利用多种技能独立完成产品的人.全栈工程师熟悉多种开发语言,同时具备前端和后台开发能力,从需求分析,原型设计到产品开发,测试,部署,发布全流程都十分熟悉 ...

前端技术分享：锥形渐变conic-gradient你了解多少？

锥形渐变的语法

前端技术分享：锥形渐变conic-gradient你了解多少？相关推荐

最新文章

热门文章