亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS實現(xiàn)反方向圓角的示例代碼

  發(fā)布時間：2018-10-12 15:24:27   作者：jvjs   我要評論
這篇文章主要介紹了CSS實現(xiàn)反方向圓角的示例代碼的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

原理

父級元素 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%;
}
/*虛線實現(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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • CSS3制作圓角圖片和橢圓形圖片

    這篇文章主要教大家CSS3制作圓角圖片和橢圓形圖片的具體實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-07-08

  • Css3圓角邊框制作代碼

    本篇文章給大家介紹基于css3來實現(xiàn)邊框圓角效果，實現(xiàn)此效果當(dāng)然border-radius要在firefox或Safari 和 Chrome才能實現(xiàn)哦。對css3圓角邊框制作代碼感興趣的朋友參考下吧
    2015-11-18

  • CSS的一些圓角圖形實例分享

    這篇文章主要介紹了CSS的一些圓角圖形實例分享,包括帶有3D效果的CSS圓角實現(xiàn),需要的朋友可以參考下
    2015-09-28

  • CSS3繪制圓角矩形的簡單示例

    這篇文章主要介紹了CSS3繪制圓角矩形的簡單示例,注意一下各瀏覽器對CSS3的兼容性,需要的朋友可以參考下
    2015-09-28

  • 使用css實現(xiàn)圓角圖形繪制

    這篇文章主要介紹了使用css實現(xiàn)圓角圖形繪制,文中也提到了相關(guān)的鋸齒問題,需要的朋友可以參考下
    2015-07-22

  • 純CSS實現(xiàn)圓角折疊菜單的方法

    這篇文章主要為大家介紹了純CSS實現(xiàn)圓角折疊菜單的方法,通過多個寬度漸進(jìn)變化的頁面元素堆加模擬圓角效果,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-05-19

最新評論