CSS实现反方向圆角的示例代码

小诸哥 2022-06-23 21:57:01 0

原理

父级元素 relative，子元素 absolute，然后通过top、left、right、bottom来设置具体出现位置。

DOM结构

<div class="wrapper-dashed">
     <div class="dashed"></div>
</div>

css样式

.wrapper-dashed{
     position: relative;
     height: 1px;
     width: 100%;
}
/*虚线实现*/
.dashed {
     border-top: 1px dashed #cccccc;
     height: 1px;
     overflow: hidden;
}
.dashed:before, .dashed:after{
     display: block;
     position: absolute;
     content: "";
     width:10px;
     height:10px;
     background-color:#f3f5f9;
     border-radius:50%;
     top: -5px;
}
.dashed:before{
     left: -5px;
}
.dashed:after{
     right: -5px;
}