conic-gradient 圆锥渐变
这几天是灰常的冷，以至于手都敲不动键盘了
对于渐变，我们都知道这几个属性
1. linear-gradient（线性渐变)
2. radial-gradient(径向渐变)
我还记得用 radial-gradient画过小*旗
今天CSS新增一个属性conic-gradient ，表示圆锥渐变，另外一种渐变方式，我们来研究一下这个神奇的渐变新属性
语法：
{
background: conic-gradient(pink, yellowgreen);
}效果就是这样子的，是不是很完美，但是有一个致命的缺点，就是兼容性非常的差
并且在谷歌上预览必须要打开实验平台
与线性渐变及圆锥渐变的异同
那么它和另外两个渐变的区别在哪里呢？
linear-gradient线性渐变的方向是一条直线，可以是任何角度radial-gradient径向渐变是从圆心点以椭圆形状向外扩散
而从方向上来说，圆锥渐变的方向是这样的：
划重点：
从图中可以看到，圆锥渐变的渐变方向和起始点。起始点是图形中心，然后以顺时针方向绕中心实现渐变效果。
conic-gradient 不仅仅只是从一种颜色渐变到另一种颜色，与另外两个渐变一样，可以实现多颜色的过渡渐变。
由此，想到了彩虹，我们可以依次列出 赤橙黄绿青蓝紫 七种颜色：
conic-gradient: (red, orange, yellow, green, teal, blue, purple)
上面表示，在圆锥渐变的过程中，颜色从设定的第一个 red 开始，渐变到 orange ，再到 yellow ，一直到最后设定的 purple 。并且每一个区间是等分的。
我们再给加上 border-radius: 50% ，假设我们的 CSS 如下，
|
1
2
3
4
5
6
|
{
width: 200px;
height: 200px;
border-radius: 50%;
background:
conic-gradient(red,
orange, yellow, green, teal, blue, purple);
}
|
看看效果：
圆锥渐变 conic-gradient polyfill 垫片库
按照惯例，这种 “高科技” 通常兼容性都不怎么滴。conic-gradient 兼容性又如何呢？
非常惨烈，CSS 官方对其的描述是：
- 处于修正阶段的模块(Modules in the revising phase)
处于修正阶段的模块没有处于改善阶段的模块稳定。通常它们的语法还需要详细审查，说不定还会有很大的变化，而且不保证和之前的兼容。替代的语法通常经过测试并已经实现。
polyfill 是一个开发术语，在 Web 开发中，polyfill 垫片库的准确意思为：用于实现浏览器并不支持的原生API的代码。现在引申为实现浏览器并不支持的某些功能的兼容库。
你需要添加如下的 JS ，垫片库会按照 CSS 语法，生成对应的圆锥渐变图案，并且转化为 BASE64 代码：
|
1
2
|
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="//leaverou.github.io/conic-gradient/conic-gradient.js"></script>
|
因为垫片库的作用是将我们的 CSS 语法转化成为 BASE64 代码替换
background-image: url()中的内容，所以，上线后是不需要再添加这两个库的。