elementui进度条如何设置_给element进度条设置渐变色

今天遇到一个element进度条样式问题：将进度条的颜色设置为渐变色。

效果图如下：

进度条颜色效果图

查看element官方文档得知，ele官方提供的color方法支持单色显示

element官方文档

考虑到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-- 从下到上*/

/*基于0度顺时针旋转45deg*/

/*基于0度逆时针旋转45deg*/

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动态生成的元素样式的方法，实现代码如下：

修改elel动态生成的元素样式

很简单吧？这里需要注意的有两点，首先是重新写一个style的时候需要删掉scoped属性，其次要找一个我们准备修改样式的类名的父元素，然后书写就可以了。

还有另一种方法更加简单，虽然我没尝试，但是还是写出来吧，小伙伴们有兴趣可以试一下：

/deep/；.personCharts为我们要修改组件类名的父级组件样式类名。

elementui进度条如何设置_给element进度条设置渐变色相关推荐

linux设置默认终端模拟器,ubuntu终端默认设置_在Ubuntu Linux上设置默认终端模拟器...
ubuntu终端默认设置_在Ubuntu Linux上设置默认终端模拟器 ubuntu终端默认设置_在Ubuntu Linux上设置默认终端模拟器 ubuntu终端默认设置 Ubuntu has a ...
联想按f2进不了bios设置_华硕笔记本win10装win7bios设置方法分享
很多朋友在重装系统的时候都在问win10装win7bios设置方法是什么,因为我们重装系统肯定是需要进入BIOS设置里面的.可是我们不知道win10装win7bios设置方法的话,有没有一篇教程能够帮 ...
物联网卡设置_物联网卡该怎样设置和使用——酷易充物联
原标题:物联网卡该怎样设置和使用--酷易充物联物联网卡外形就像我们平时使用的SIM卡一样,小巧易于携带.和SIM卡一样,物联网卡同样也是运营商的网络,信号覆盖范围大.NFC,蓝牙通信距离都过于短,且 ...
路由器mw320虚拟服务器,新版水星MW320R路由器怎么设置_新版水星MW320R路由器设置教程-192路由网...
本文主要介绍了新版水星MW320R路由器的安装.上网设置.无线wifi设置等内容.一台新购买的新版水星MW320R无线路由器,或者是刚恢复出厂设置的水星MW320R路由器,要连接Internet上网, ...
华为7c手机怎么恢复出厂设置_华为手机恢复出厂设置在哪里。
展开全部 1.打开华为手机主来界面:源 2.在手机桌面上找到"设bai置",并点击一下打开du:zhi 3.设置页面dao打开: 4.向下滑动设置页面,找到"高级设置&q ...
obs自定义编码设置_通过7个步骤设置OBS进行实时编码
obs自定义编码设置 by Wesley McCann 韦斯利·麦肯(Wesley McCann) 通过7个步骤设置OBS进行实时编码 (Setting up OBS for Live Coding ...
华为q1设置虚拟服务器,华为路由Q1用手机怎么设置_华为路由Q1手机设置教程-192路由网...
本文主要介绍了使用手机来设置华为路由Q1上网的方法.华为路由Q1可以使用电脑来设置的,如果在没有电脑的情况下,也可以使用手机来进行设置. 用手机设置华为路由Q1上网时,请按照下面的步骤进行操作: 1. ...
进度条设置_为你的练习设置进度条
在我们的日常练习中,遇到最多的一个问题就是不知道自己练得怎么样了?还需不需要继续,或者调整练习方法.这种问题大多出现在自学吉他的学生当中,因为得不到老师的反馈,自己练得对不对,够不够,都没有一个具体标 ...
elementui 上传七牛_用element ui上传图片到七牛踩过的坑
前端上传图片到七牛云的流程请求后端接口获取上传凭证请求七牛云地址上传图片到七牛云上传完毕将获得七牛云返回的图片地址七牛云地址说到七牛云地址,奴家真的是一把鼻涕一把泪刚开始做图片上传的时候, ...

elementui进度条如何设置_给element进度条设置渐变色

elementui进度条如何设置_给element进度条设置渐变色相关推荐

最新文章

热门文章