认识“新”朋友—conic-gradient

曾经，咱们须要用图片来完成不少视觉效果，代码难以实现的形状、色彩等等，还好后来有了CSS3，不少新的属性能够实现之前没法想象的元素，帮咱们节省了大量的开发成本和网络传输成本。

本篇咱们聊一种新的渐变—conic-gradient，说新其实也不算新，早在两三年之前，就有书籍和开发者作过度享，但那个时候浏览器的支持状况很不乐观，即使是如今，也只有较新版本的浏览器支持，不过这不影响咱们去学习。

现役成员

咱们熟悉的渐变有线性渐变（linear-gradient）和径向渐变（radial-gradient），而且在平常需求中用处很广，而它们也每每不负所托，能发挥奇效。

好比：

三角

background-image:linear-gradient(to bottom right,orange 0,orange 49%,transparent 50%,transparent 100%)
复制代码

条纹

background:repeating-linear-gradient(45deg,#fb3,#fb3,5px ,#58a 0,#5ba  10px);
复制代码

镂空

background-image:radial-gradient(transparent 0,transparent 49%,orange 50%,orange 100%)
复制代码

当这些创意第一次出现时，无不使人惊叹，但如今你们已经习觉得常了。

今天介绍的这位就更具特点，你可能真没听过。

锥形渐变

咱们知道，线性渐变是颜色沿着一条笔直的轴线变化，还能够调整角度；径向渐变则是以一个点为圆心向四周扩散，锥形是怎样的呢？

不妨直接看个效果：

如下代码在新版Chrome中都可正常运行

background: conic-gradient(green, orange);
复制代码

这是个简单的例子，看起来要比以前的那些简单许多。效果以下：

这么看来，它的工做原理彷佛明了,和径向渐变相似，它也是以一个点为中心起始点，不一样的是，不是由内向外扩散，而是 沿着圆周变化。

正式看一下语法规则：

conic-gradient( from 起始角度 at 中心点位置, 渐变断点 )

从上面的例子能够看出，前两个参数是能够省略的，不影响代码执行，不过还有一个细节这里没有体现，即颜色断点是能够添加角度（或者百分比）的，就像线性渐变能够添加断点同样。

咱们索性把上面的例子用新数据改一下看看效果：

background: conic-gradient(from 60deg at 20% 20%, green 40%, orange 40%);
复制代码

哇偶，乍一看有点奇怪，但不以为有点神奇么？换个角度思考，若是让你实现这么个效果，是否是会摸不着头脑？

咱们每每对规则图形敏感，一遇到不规则，就脑瓜短路，因此，多思考，多尝试~

好了，是时候看看咱们能够用它实现哪些实用的效果了！

色盘

background: conic-gradient(red, magenta, blue, aqua, lime, yellow, red);
复制代码

美轮美奂。

饼图

background: conic-gradient(#3ebd3e 0, #3ebd3e 30%, #ff9800 30%, #ff9800 70%, #03a9f4 70%, #03a9f4 100%);
复制代码

无缝衔接

既然这些能够，那么彩色边框也就能够。

环状图也不在话下。

相似loading应该也能够。

咋不上天呢？~

好了，效果是说不完的，先展现到这儿了，部分代码没有列出，想看的话能够来这里。

它能作的固然不止这些，但笔者一贯以实用为准则，花样是其次，就不玩儿那么多了，有兴趣你能够随意玩儿~

总结

虽然我向来认为JavaScript要比CSS难一些，但总有一些人会说CSS才是最难的，也不无道理，但它的难，也正是它出彩的地方，每个属性出来感受都很简单，但若是可以充分发挥想象力，再结合数学、图形以及动画方面的能力，就能作出不少意想不到的效果。

不知你看完感受如何呢，是否跃跃欲试？那就撸起来吧！下篇见！~

认识“新”朋友—conic-gradient