html中怎样弄横向导航圆角,CSS如何实现反方向圆角？（代码）

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

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

DOM结构

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;

}

效果图