css3 实现线条两端渐变效果

接触了一个css3效果,记录下来，方便以后使用，在实践中学点新知识，共勉！！

html标签

<div class="box-show"> </div>                     

css样式

.box-show{
    width:100%;
  border-bottom: 1px solid #56A7FB;border-bottom: 1px solid ;
    border-image: -webkit-linear-gradient(30deg, rgba(255,255,255,0.00) 0%,#56A7FB 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
    border-image: -moz-linear-gradient(30deg, rgba(255,255,255,0.00) 0%,#56A7FB 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
    border-image: linear-gradient(30deg, rgba(255,255,255,0.00) 0%,#56A7FB 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
}

展现结果

image.png