锥形渐变conic-gradient你了解多少?
2021/5/13 10:29:41
本文主要是介绍锥形渐变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你了解多少?的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-26小白家庭 nas 搭建方案-icode9专业技术文章分享
- 2024-06-23AI大模型企业应用实战(14)-langchain的Embedding
- 2024-06-23AI大模型企业应用实战(15)-langchain核心组件
- 2024-06-23AI大模型企业应用实战(16)-langchain核心组件
- 2024-06-23AI 大模型企业应用实战(06)-初识LangChain
- 2024-06-19EntBot.ai: AI Website Chatbot for Product Guides and Development Doc
- 2024-06-17zero-shot-learning-definition-examples-comparison
- 2024-06-06Package Easy(基于 NSIS 的打包exe安装包工具)使用方法-icode9专业技术文章分享
- 2024-06-06基于 casdoor 的 ELK 开源登录认证解决方案: elk-auth-casdoor-icode9专业技术文章分享
- 2024-05-29Elasticsearch慢查询日志配置