CSS如何实现反方向圆角？（代码）

互联网 18-10-12

本篇文章给大家带来的内容是关于CSS如何实现反方向圆角？（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

原理

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