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>