CSS完成反向圆角的示例编码

2021-03-17 17:28 jianzhan

基本原理

父级元素 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: ⑸px;
}
.dashed:before{
    left: ⑸px;
}
.dashed:after{
    right: ⑸px;
}

实际效果图

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。