记录实现过程 先上图看效果
//下部分
.bottom-main{
width: 100%;
background-color: #fff;
border-top:2px dashed #eee;
position: relative;
padding: 35rpx;
}
.bottom-main::before{
background-color: #eee;
content:'';
display:block;
border-radius: 50%;
width:30rpx;
height:30rpx;
position: absolute;
left:-15rpx;
top:-15rpx;
}
.bottom-main::after{
background-color: #eee;
content:'';
display:block;
border-radius: 50%;
width:30rpx;
height: 30rpx;
position: absolute;
right:-15rpx;
top:-15rpx;
}
主要是利用 伪类元素 和 上边框虚线 来完成的 top 和right值刚好是宽高的一半