CSS實(shí)現(xiàn)反方向圓角的示例代碼
發(fā)布時(shí)間：2018-10-12 15:24:27 作者：jvjs 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS實(shí)現(xiàn)反方向圓角的示例代碼的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
原理
父級(jí)元素 relative，子元素 absolute，然后通過top、left、right、bottom來設(shè)置具體出現(xiàn)位置。
DOM結(jié)構(gòu)
<div class="wrapper-dashed">
<div class="dashed"></div>
</div>
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;
}
效果圖
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要教大家CSS3制作圓角圖片和橢圓形圖片的具體實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-08
- 本篇文章給大家介紹基于css3來實(shí)現(xiàn)邊框圓角效果，實(shí)現(xiàn)此效果當(dāng)然border-radius要在firefox或Safari 和 Chrome才能實(shí)現(xiàn)哦。對(duì)css3圓角邊框制作代碼感興趣的朋友參考下吧2015-11-18
- 這篇文章主要介紹了CSS的一些圓角圖形實(shí)例分享,包括帶有3D效果的CSS圓角實(shí)現(xiàn),需要的朋友可以參考下2015-09-28
- 這篇文章主要介紹了CSS3繪制圓角矩形的簡單示例,注意一下各瀏覽器對(duì)CSS3的兼容性,需要的朋友可以參考下2015-09-28
- 這篇文章主要介紹了使用css實(shí)現(xiàn)圓角圖形繪制,文中也提到了相關(guān)的鋸齒問題,需要的朋友可以參考下2015-07-22
- 這篇文章主要為大家介紹了純CSS實(shí)現(xiàn)圓角折疊菜單的方法,通過多個(gè)寬度漸進(jìn)變化的頁面元素堆加模擬圓角效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-05-19