使用css設置border從中間向兩邊的顏色漸進效果

1.效果圖，設置目錄的右框線漸進效果

2.代碼

.rightCont>div:nth-child(1){
  width: 370px;
  height: 100%;
  border-right: 2px solid;
  border-image: -webkit-linear-gradient(-180deg, rgba(255,255,255,0.00) 0%,#00BBF2 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
  border-image: -moz-linear-gradient(-180deg, rgba(255,255,255,0.00) 0%,#00BBF2 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
  border-image: linear-gradient(-180deg, rgba(255,255,255,0.00) 0%,#00BBF2 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
}

 3.橫向：

.ShieldHospitaRightProInfo li{
  padding: 20px;
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, rgba(0,216,247,0.00) 0%, #00AFED 100%) 2 2 2 2;
  border-image: -webkit-linear-gradient(90deg, rgba(0,216,247,0.00) 0%, #00AFED 100%) 2 2 2 2;
  border-image: -moz-linear-gradient(90deg, rgba(0,216,247,0.00) 0%, #00AFED 100%) 2 2 2 2;
}

<div  class="ShieldHospitaRightProInfo">
  <ul>
    <li v-for='(itme,index) in sources' :key="index">
      <a>{{itme.name}}</a>
    </li>
  </ul>
</div>

 或者

background: -webkit-linear-gradient(left,rgba(0,216,247,0),rgba(0,175,237,1));