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

LuDongWei 發(fā)布于2019-08-29 16:57 / 1719人閱讀

摘要：原理父級(jí)元素，子元素，然后通過(guò)來(lái)設(shè)置具體出現(xiàn)位置。結(jié)構(gòu)樣式虛線實(shí)現(xiàn)效果圖

原理

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

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

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

效果圖

GPU云服務(wù)器云服務(wù)器內(nèi)凹圓角，css3 html表格實(shí)現(xiàn)反選 JS輕松實(shí)現(xiàn)CSS設(shè)置設(shè)置圓角

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114007.html

相關(guān)文章

文檔流&文字&CSS常用命令

摘要：文檔流文檔流就是文檔內(nèi)元素流動(dòng)方向流動(dòng)方向內(nèi)聯(lián)元素從左往右流，寬度不夠，之字形，且元素會(huì)被截?cái)鄩K元素從上往下流動(dòng)，一排一排注意事項(xiàng)內(nèi)聯(lián)元素中有英文單詞，流動(dòng)時(shí)寬度不夠，英文單詞會(huì)整體遷移，不會(huì)被打斷若想打斷上述聯(lián)結(jié)，請(qǐng)使用屬性想打斷的內(nèi)聯(lián)元文檔流文檔流就是文檔內(nèi)元素流動(dòng)方向流動(dòng)方向內(nèi)聯(lián)元素從左往右流，寬度不夠，之字形，且元素會(huì)被截?cái)? 塊元素從上往下流動(dòng)，一排一排 sho...

zebrayoung 2019-08-30 14:13 評(píng)論0 收藏0
文檔流&文字&CSS常用命令

摘要：文檔流文檔流就是文檔內(nèi)元素流動(dòng)方向流動(dòng)方向內(nèi)聯(lián)元素從左往右流，寬度不夠，之字形，且元素會(huì)被截?cái)鄩K元素從上往下流動(dòng)，一排一排注意事項(xiàng)內(nèi)聯(lián)元素中有英文單詞，流動(dòng)時(shí)寬度不夠，英文單詞會(huì)整體遷移，不會(huì)被打斷若想打斷上述聯(lián)結(jié)，請(qǐng)使用屬性想打斷的內(nèi)聯(lián)元文檔流文檔流就是文檔內(nèi)元素流動(dòng)方向流動(dòng)方向內(nèi)聯(lián)元素從左往右流，寬度不夠，之字形，且元素會(huì)被截?cái)? 塊元素從上往下流動(dòng)，一排一排 sho...

pingink 2019-08-01 18:43 評(píng)論0 收藏0
用純css來(lái)實(shí)現(xiàn)一個(gè)優(yōu)惠券

摘要：關(guān)于徑向漸變的具體使用可以參考張?chǎng)涡竦奈恼聫较驖u變語(yǔ)法及輔助理解案例則那么怎樣實(shí)現(xiàn)我們要的效果呢我們先看看徑向漸變的語(yǔ)法徑向漸變由它的中心定義。查看原文可以有更好的排版效果哦前言我們?cè)谄綍r(shí)的網(wǎng)頁(yè)中，經(jīng)常會(huì)見(jiàn)到這樣的優(yōu)惠券或者其他的券（特征就是會(huì)有反方向的圓角）。 showImg(https://segmentfault.com/img/remote/146000001570560...

awkj 2019-08-30 15:54 評(píng)論0 收藏0
CSS魔法堂：重拾Border之——不僅僅是圓角

摘要：擼代碼實(shí)現(xiàn)首頁(yè)檢驗(yàn)單查詢成品通用標(biāo)準(zhǔn)審核圓角的何止是啊上圖的變成橢圓形了，而且中的文字好像飄到外面。我們可以看到兩邊相交所形成的矩形的對(duì)角線，將作為邊的相交點(diǎn)。前言 ?當(dāng)CSS3推出border-radius屬性時(shí)我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來(lái)模擬圓角了，但發(fā)現(xiàn)border-radius還分水平半徑和垂直半徑，然后又發(fā)現(xiàn)border-top-left/right...

_Dreams 2019-08-30 13:01 評(píng)論0 收藏0
CSS 無(wú)圖片技術(shù)總結(jié)

摘要：預(yù)覽動(dòng)態(tài)移動(dòng)邊框鋸齒邊框首先我們重復(fù)度的透明背景，可以得到下面的再加一個(gè)反角度的秀景背景完整的鋸齒邊框效果更多背景效果動(dòng)態(tài)移動(dòng)邊框查看三角形從上面的圖可以看出的各邊框是三角形，如果只設(shè)置下邊框就可以得到三角形了。預(yù)覽 showImg(https://segmentfault.com/img/remote/1460000006766693);動(dòng)態(tài)移動(dòng)邊框showImg(https://...

pekonchan 2019-08-30 13:05 評(píng)論0 收藏0