css渐变实现border部分显示

利用渐变可以让border在某个百分比变色，把其中一个改为透明即可隐藏部分border 

#grad1 {
  height: 200px;
  border: 10px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to left, red 0, red 50%, green 50%, green 100%);
}

 

 隐藏左边50%的border

#grad1 {
  height: 200px;
  border: 10px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to left, red 0, red 50%, transparent 50%, transparent 100%);
}