CSS实现反方向圆角

最新推荐文章于 2024-12-04 17:22:57 发布

weixin_34318326

最新推荐文章于 2024-12-04 17:22:57 发布

阅读量4.9k

点赞数

原文链接：https://segmentfault.com/a/1190000016660559

版权

原理

父级元素 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;
}