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:'';
        　　}
    }