神奇的conic-gradient圆锥渐变作者：伯乐在线/chokcoco
感谢 LeaVerou ⼤神，让我们可以提前使⽤上这么美妙的属性。
conic-gradient 是个什么？说到 conic-gradient ，就不得不提的它的另外两个兄弟：
1、linear-gradient : 线性渐变
2、radial-gradient : 径向渐变
说这两个应该还是有很多⼈了解并且使⽤过的。CSS3 新增的线性渐变及径向渐变给 CSS 世界带来了很⼤的变化。⽽ conic-gradient ，表⽰圆锥渐变，另外⼀种渐变⽅式，给 CSS 世界带来了更多可能。
下⾯进⼊正⽂，本⽂中所有⽰例，请在⾼版本 Chrome 内核下预览。
API
看看它最简单的 API：
{
/* Basic example */
background: conic-gradient(deeppink, yellowgreen);
}
与线性渐变及圆锥渐变的异同
那么它和另外两个渐变的区别在哪⾥呢？
1、linear-gradient 线性渐变的⽅向是⼀条直线，可以是任何⾓度
2、radial-gradient径向渐变是从圆⼼点以椭圆形状向外扩散
⽽从⽅向上来说，圆锥渐变的⽅向是这样的：
划重点：
从图中可以看到，圆锥渐变的渐变⽅向和起始点。起始点是图形中⼼，然后以顺时针⽅向绕中⼼实现渐变效果。使⽤ conic-gradient 实现颜⾊表盘
从上⾯了解了 conic-gradient 最简单的⽤法，我们使⽤它实现⼀个最简单的颜⾊表盘。
conic-gradient 不仅仅只是从⼀种颜⾊渐变到另⼀种颜⾊，与另外两个渐变⼀样，可以实现多颜⾊的过渡渐变。
由此，想到了彩虹，我们可以依次列出 ⾚橙黄绿青蓝紫 七种颜⾊：
1、conic-gradient: (red, orange, yellow, green, teal, blue, purple)
上⾯表⽰，在圆锥渐变的过程中，颜⾊从设定的第⼀个 red 开始，渐变到 orange ，再到 yellow ，⼀直到最后设定的 purple 。并且每⼀个区间是等分的。
我们再给加上 border-radius: 50% ，假设我们的 CSS 如下，
{
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(red, orange, yellow, green, teal, blue, purple);border radius什么意思
}
看看效果：
wow，已经有了初步形状了。但是，总感觉哪⾥不⼤⾃然。总之，浑⾝难受
嗯？问题出在哪⾥呢？⼀是颜⾊不够丰富不够明亮，⼆是起始处与结尾处衔接不够⾃然。让我再稍微调整⼀下。
我们知道，表⽰颜⾊的⽅法，除了 rgb() 颜⾊表⽰法之外，还有 hsl() 表⽰法。
hsl() 被定义为⾊相-饱和度-明度（Hue-saturation-lightness）
1、⾊相（H）是⾊彩的基本属性，就是平常所说的颜⾊名称，如红⾊、黄⾊等。
2、饱和度（S）是指⾊彩的纯度，越⾼⾊彩越纯，低则逐渐变灰，取0-100%的数值。
3、明度（V），亮度（L），取0-100%。
这⾥，我们通过改变⾊相得到⼀个较为明亮完整的颜⾊⾊系。
也就是采⽤这样⼀个过渡 hsl(0%, 100%, 50%) –> hsl(100%, 100%, 50%)，中间只改变⾊相，⽣成 20 个过渡状态。借助 SCSS ，CSS 语法如下:
$colors: ();
$totalStops:20;
<a href="www.jobbole/members/lowkey2046">@for</a> $i from 0 through $totalStops{
$colors: append($colors, hsl($i *(360deg/$totalStops), 100%, 50%), comma);
}
.colors {
width: 200px;
height: 200px;
background: conic-gradient($colors);
border-radius: 50%;
}
得到如下效果图，这次的效果很好：
配合百分⽐使⽤
当然，我们可以更加具体的指定圆锥渐变每⼀段的⽐例，配合百分⽐，可以很轻松的实现饼图。
假设我们有如下 CSS：
{
width: 200px;
height: 200px;
background: conic-
gradient(deeppink 0, deeppink 30%, yellowgreen 30%, yellowgreen 70%, teal 70%, teal 100%);
border-radius: 50%;