最近專案中使用到進度條，關於進度條的顏色，ui畫的長這樣，

這是我一開始畫的，

其實element上的進度條實際上長這樣

我把藍色這一塊改成白色後，發現和底色一樣，就看不出進度的效果了，所以隨便先調了一個顏色，結果被ui小姐姐無情的指出要修改
好吧，修改之後進度條長這樣

仔細看是有漸變色效果的，現在上程式碼

     <div class="header_pic_1 header_pic_img1">
       <el-progress :percentage="70" ></el-progress>
      <
 
/div>
 .header_pic_img1 {
    background: url("[email protected]/assets/images/xxx.png") no-repeat;
 ::v-deep .el-progress { 
  .el-progress-bar{
 .el-progress-bar__outer{
   background:linear-gradient(to right#8075fd , #b87bfe)  
 } 
  .el-progress-bar__inner{
  background:linear-gradient(
 
to right, #8075fd ,  #f9fdf8)
}
   }
}
  }
  .header_pic_img2 {
    background: url("[email protected]/assets/images/xxx.png") no-repeat;
    ::v-deep .el-progress { 
  .el-progress-bar{
 .el-progress-bar__outer{
   background:linear-gradient(to right,#8cc8fa,#a4b7fd)  
 } 
  .el-progress-bar__inner{
 

  background:linear-gradient(to right, #8cc8fa, #f9fdf8)
}
   }
}
  }
  .header_pic_img3 {
    background: url("[email protected]/assets/images/xxx.png") no-repeat;
  ::v-deep .el-progress { 
 .el-progress-bar{
 .el-progress-bar__outer{
   background:linear-gradient(to right,#f2a4aa,#f5bda3)  
 } 
 .el-progress-bar__inner{
  background:linear-gradient(to right,#f2a4aa,#f9fdf8)
}
 }
}
  }
  .header_pic_img4 {
    background: url("[email protected]/assets/images/xxx.png") no-repeat;
     ::v-deep .el-progress { 
  .el-progress-bar{
 .el-progress-bar__outer{
   background:linear-gradient(to right,#98e8bb,#baeb9e)  
 } 
  .el-progress-bar__inner{
  background:linear-gradient(to right,#98e8bb ,#f9fdf8 )
}
   }
}
  }
}
::v-deep .el-progress__text {
  margin-left: -10px;
  color: #fff;
}

el-progress所在的div有一張背景圖，一排有四個div對應四張背景圖。el-progress的樣式要深度選擇器才能修改到，四個progress一開始用nth-child的方式 想給每個progress修改為不一樣的顏色，但是試了幾種都沒成功。
我用的是sass預編譯器，通過層級巢狀，作用到每一個獨立的div，從而改變內部的progress的背景色。