CSS實(shí)現(xiàn)反方向圓角的方法

發(fā)布時(shí)間：2020-09-14 11:01:51 來源：億速云閱讀：397 作者：小新欄目：web開發(fā)

CSS實(shí)現(xiàn)反方向圓角的方法？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

原理

父級元素 relative，子元素 absolute，然后通過top、left、right、bottom來設(shè)置具體出現(xiàn)位置。

DOM結(jié)構(gòu)

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

CSS實(shí)現(xiàn)反方向圓角的方法

CSS樣式

.wrapper-dashed{
    position: relative;
    height: 1px;
    width: 100%;
}
/*虛線實(shí)現(xiàn)*/
.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實(shí)現(xiàn)反方向圓角的方法

感謝各位的閱讀！看完上述內(nèi)容，你們對CSS實(shí)現(xiàn)反方向圓角的方法大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

CSS實(shí)現(xiàn)反方向圓角的方法

DOM結(jié)構(gòu)

CSS樣式

效果圖

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽