边框渐变

QQ截图20190212162521.png

.linear-line{
  width: 100%;
  height: 1rpx;
  background-clip:padding-box,border-box;
  background-origin:padding-box,border-box;
  background-image:linear-gradient(-90deg,#f1f1f1,#f1f1f1),linear-gradient(-90deg, #ffffff, #dfdfdf, #ffffff);
  border-bottom: 2px solid;
  border-image: linear-gradient(-90deg, #ffffff, #dfdfdf, #ffffff);
}

background-image 中的第一个 linear-gradient 是设置背景色的，
第二个 linear-gradient 配合 border-image 即可设置 border的渐变色。