css分隔虚线，双色样式（repeating-linear-gradient）

做购物车或者结算时有个分隔虚线

 

 

 

 

 我们想做到双色分隔线时

可以使用一个div来或者使用:before伪类元素来做底部的虚线

这里我是使用的伪类元素

 

 

 我们使用address-wrap的伪类来做底部虚线，直接贴出样式

 .address-wrap{
             position: relative;
        　　　&::before{
            　　position: absolute;
           　　 right: 0;
            　　bottom: 0;
            　　left: 0;
            　　height: 2px;
            　　background:repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0,#1989fa 41%,transparent 0, transparent 50%); //最重要是这行
            　　background-size: 80px;
            　　content:'';
        　　}
    }