首页 / css教程

    CSS如何实现反方向圆角?(代码)

    作者:PHP中文网2018-10-12 16:53:15

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

    原理

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

    DOM结构

    <div class="wrapper-dashed">
        <div class="dashed"></div>
    </div>

    3922638512-5b99deb3574e6_articlex.png

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

    效果图

    2950624086-5b99df38e048d_articlex.png

    3862975692-5b99e03605414_articlex.png

    以上就是CSS如何实现反方向圆角?(代码)的详细内容,更多请关注php中文网其它相关文章!

    标签:

PHP中文网

未登录