今天遇到一個(gè)element進(jìn)度條樣式問(wèn)題：將進(jìn)度條的顏色設(shè)置為漸變色虚倒。
效果圖如下：
查看element官方文檔得知嫡锌，ele官方提供的color方法支持單色顯示
考慮到CSS中 background-image屬性可以提供顏色漸變，在網(wǎng)頁(yè)F12中直接調(diào)試后發(fā)現(xiàn)該方法可行：
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度順時(shí)針旋轉(zhuǎn)45deg*/
background-image: linear-gradient(45deg, red, yellow, blue, green);
/*基于0度逆時(shí)針旋轉(zhuǎn)45deg*/
background-image: linear-gradient(-45deg, red, yellow, blue, green);
3.控制顏色漸變的方向(to)：
/*從過(guò)渡起始位置50px開(kāi)始讓紅色和黃色之間產(chǎn)生顏色漸變效果檬寂，方向?yàn)橛?/
/*向左同理*/
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動(dòng)態(tài)生成的div终抽，然后設(shè)置background-image:linear-gradient(),但是在調(diào)試中發(fā)現(xiàn)這樣寫(xiě)不生效，詢問(wèn)同事得知桶至，ele樣式在scoped中更改時(shí)無(wú)效的昼伴，但是刪掉scoped的話會(huì)影響到全局的樣式：
卡在這里一會(huì)后，我不出意外地又去求助度娘了塞茅，查詢后得到了修改ele動(dòng)態(tài)生成的元素樣式的方法亩码，實(shí)現(xiàn)代碼如下：
很簡(jiǎn)單吧季率？這里需要注意的有兩點(diǎn)野瘦，首先是重新寫(xiě)一個(gè)style的時(shí)候需要?jiǎng)h掉scoped屬性，其次要找一個(gè)我們準(zhǔn)備修改樣式的類名的父元素飒泻，然后書(shū)寫(xiě)就可以了鞭光。
還有另一種方法更加簡(jiǎn)單，雖然我沒(méi)嘗試泞遗，但是還是寫(xiě)出來(lái)吧惰许，小伙伴們有興趣可以試一下：
/deep/；.personCharts為我們要修改組件類名的父級(jí)組件樣式類名史辙。
