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() 中的内容，所以，上线后是不需要再添加这两个库的。