线性渐变linear-gradient——线性渐变实现虚线斜线条纹

1.效果图

2.html

<div class="box">
        <div class="address-edit">
       
        </div>
    </div>

3.css

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            position: relative;
            width: 100vw;
            height: 300px;
            background-color: #fff;
        }
        .address-edit::before {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 2px;
            /* 重复线性渐变 20%表示渐变的位置 transparent表示透明度，实现虚线效果*/
            background: repeating-linear-gradient(315deg, #ff976a 0, #ff976a 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
            background-size: 80px;  
            content: "";
        }
    </style>