探索CSS属性*-gradient的实用价值
先介绍一下一个有趣的属性 —— conic-gradient ：圆锥渐变！
对其感兴趣是因为我发现它竟然可以用来做圆饼图！
比如这样的：
这样的：
其原理也很简单：就是以起始点为中心，然后以顺时针方向绕中心实现渐变效果。其必须接收多种颜色值参数，每个颜色值后可以跟两个百分比，为当前颜色值的起始点和终止点（中间用空格隔开）：
background: conic-gradient(pink 0 30%, yellow 0 70%, lime 0 100%);
还可以分开来写：
background: conic-gradient(pink 0, pink 30%, yellow 30%, yellow 70%, lime 70%, lime 100%);
（第二种方式兼容性比第一种好一点）
慢着！上面第二张图片不就是我们想要的吗？
根据图片，我们不难得出下面的代码：
{
width: 200px;
height: 200px;
background: conic-gradient(deeppink 0, deeppink 30%, yellowgreen 30%, yellowgreen 70%, teal 70%, teal 100%);
border-radius: 50%;
}
But，这里面完全是“静态”的。
我们大概大部分人都用过echarts绘制图形：根据后端传来的数据渲染到echarts的Map对象的指定参数（数组）中就能得到一个符合要求的不同颜色显示的圆饼图了。这用CSS怎么做呢？
我们当然要借助JS的帮助 —— 因为CSS3推出了 自定义变量 ，它可以很好的让css属性与JavaScript变量相结合：
经过探索，目前比较好的实践应该就是给gradient的颜色开始与结束位置设置为自定义变量，然后当JavaScript拿到数据后通过改变其值从而改变圆饼图中的颜色分布！
放一个以前写过的演示demo：
:root{
--zero:0;
--one:50%;
}
.circle{
width: 300px;
height: 300px;
border-radius: 50%;
/* background: conic-gradient(red, yellow, lime, aqua, blue, fuchsia, red); */
background: conic-gradient(red var(--zero) var(--one),yellow var(--one) 100%);
}
<div class="circle"></div>
<button id="but">点我改变圆饼图分布</button>
<script>
but.onclick=function(){
document.documentElement.style.setProperty('--zero', '10%');
document.documentElement.style.setProperty('--one', '70%');
}
</script>
如果要动态增加颜色值（比如新增调查对象），可以动态修改style中的属性：
xxx.style.xxx="xxx"; //改变
这要比用“::after伪元素”实现起来方便多了！
伪元素的方式可能很多人也玩过：利用transform的rotate属性将一个content盒子旋转并显示部分以达到目的。
还有很多“骚操作”网上应该一搜一堆，这里就不再赘述了（：相比于前两年浏览器对此属性的“漠不关心”到现在的部分支持，也是很大进步了，让我们继续期待吧）
关于 linear-gradient
这个属性除了在一些网站上用作某个元素的背景以外，似乎并没有什么值得关注的地方：
比如 条纹背景
“如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域，
过渡的起止色分别是第一个和最后一个指定值。从效果上看，颜色会在那
个位置突然变化，而不是一个平滑的渐变过程。”
因为渐变是一种由代码生成的图像，我们能像对待其他任何背景图像那样对待它，而且还可以通过 background-size 来调整其尺寸；并且由于背景在默认情况下是重复平铺的，整个容器其实已经被填满了水平条纹：
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;
垂直条纹
垂直条纹的代码跟水平条纹几乎是一样的，差别主要在于：我们需要在
开头加上一个额外的参数来指定渐变的方向。在水平条纹的代码中，我们其
实也可以加上这个参数，只不过它的默认值 to bottom 本来就跟我们的意
图一致，于是就省略了。最后，我们还需要把 background-size 的值颠倒
一下：
background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 30px 100%;
需要注意的是：linear-gradient如果加了第一个参数，则其默认方向就会变为“从下向上”的，为此，笔者还向菜鸟教程投过邮件建议他们在文档中修改措辞。
倾斜条纹
“传统的”仅仅改变linear-gradient第一个参数——角度值的方式或者通过background-size增加“精确度”的方式都不能有效的达到真正意义上完美的倾斜背景：它们总是会在大小改变或者换一个倾斜度时把整个图案搞乱！
幸运的是，我们还有更好的方法来创建斜向条纹：一个鲜为人知的真相是 linear-gradient() 和 radial-gradient() 还各有一个循环式的加强版：repeating-linear-gradient() 和 repeating-radial-gradient()。
它们的工作方式跟前两者类似，只有一点不同：色标是无限循环重复的，直
到填满整个背景！
background: repeating-linear-gradient(45deg, #fb3, #58a 30px);
哦，对了，同上面一样，所有的“-gradient”属性在没有限制起始位置和终止位置时都会有“渐变光晕”，如果我们改为下面这样：
background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);
看到这张图你有没有想到一个著名的案例——三角形？
background: #eee;
background-image: linear-gradient(45deg, transparent 75%, #bbb 0);
而我们以前用CSS一般是像这样写的：
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: black ;