当前位置:Web前端 > > 正文

css 圆角切换(CSS实现反方向圆角的示例代码)

时间:2022-03-30 14:51:38类别:Web前端

css 圆角切换

CSS实现反方向圆角的示例代码

原理

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

DOM结构

  • <li class="wrapper-dashed">
        <li class="dashed"></li>
    </li>
    
  • css 圆角切换(CSS实现反方向圆角的示例代码)

    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;
    }
    
  • 效果图

    css 圆角切换(CSS实现反方向圆角的示例代码)

    css 圆角切换(CSS实现反方向圆角的示例代码)

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐