首页 > 脚本 > 网络编程 > 反方向圆角CSS代码案例分享,CSS实现反方向圆角的示例代码

反方向圆角CSS代码案例分享,CSS实现反方向圆角的示例代码

来源:整理 时间:2022-02-17 16:50:00 编辑:飘云 手机版

原理

父级元素 relative,子元素 absolute然后通过topleftrightbottom设置具体出现位置

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;
}

效果图

DOM结构

CSS样式

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持元马网。
反方向圆角CSS代码案例分享,CSS实现反方向圆角的示例代码相关文章内容。

文章TAG:CSS反方向圆角代码

最近更新

网络编程最新文章

脚本排行榜推荐