今天遇到一个element进度条样式问题：将进度条的颜色设置为渐变色。
效果图如下：
查看element官方文档得知，ele官方提供的color方法支持单色显示
Elemen官方文档
考虑到CSS中 background-image属性可以提供颜色渐变，在网页F12中直接调试后发现该方法可行：
linear-gradient
1.基本用法：
background-image:linear-gradient(red, yellow, blue, green);
background-image:linear-gradient(rgba(255,0,0,.2), yellow, blue, green);
2.控制颜色渐变的方向：
/*0deg= to top-- 从下到上*/
background-image: linear-gradient(0deg, red, yellow, blue, green);
/*基于0度顺时针旋转45deg*/
background-image: linear-gradient(45deg, red, yellow, blue, green);
/*基于0度逆时针旋转45deg*/
background-image: linear-gradient(-45deg, red, yellow, blue, green);
3.控制颜色渐变的方向(to)：
/*从过渡起始位置50px开始让红色和黄色之间产生颜色渐变效果，方向为右*/
/*向左同理*/
background-image:linear-gradient(to right, red50px, yellow, blue, green);
background-image:linear-gradient(to right, red50px, yellow50px, blue, green);
background-image:linear-gradient(to right, red50px, yellow50px, yellow100px, blue, green);
我的思路是用css类选择器直接选择element动态生成的div，然后设置background-image:linear-gradient(),但是在调试中发现这样写不生效，询问同事得知，ele样式在scoped中更改时无效的，但是删掉scoped的话会影响到全局的样式：
卡在这里一会后，我不出意外地又去求助度娘了，查询后得到了修改ele动态生成的元素样式的方法，实现代码如下：
很简单吧？这里需要注意的有两点，首先是重新写一个style的时候需要删掉scoped属性，其次要找一个我们准备修改样式的类名的父元素，然后书写就可以了。
还有另一种方法更加简单，虽然我没尝试，但是还是写出来吧，小伙伴们有兴趣可以试一下：
/deep/；.personCharts为我们要修改组件类名的父级组件样式类名。
