這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)怎么在CSS中控制邊框長度,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
創(chuàng)新互聯(lián)主要從事網(wǎng)頁設(shè)計、PC網(wǎng)站建設(shè)(電腦版網(wǎng)站建設(shè))、wap網(wǎng)站建設(shè)(手機版網(wǎng)站建設(shè))、成都響應(yīng)式網(wǎng)站建設(shè)、程序開發(fā)、網(wǎng)站優(yōu)化、微網(wǎng)站、小程序開發(fā)等,憑借多年來在互聯(lián)網(wǎng)的打拼,我們在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、網(wǎng)絡(luò)營銷經(jīng)驗,集策劃、開發(fā)、設(shè)計、營銷、管理等多方位專業(yè)化運作于一體。<div class="content-block"> <div class="box-container"> <div class="border-top">border top</div> </div> <div class="box-container"> <div class="border-left">border left</div> </div> <div class="box-container"> <div class="border-right">border right</div> </div> <div class="box-container"> <div class="border-bottom">border bottom</div> </div> </div>
.box-container { position: relative; width: 90%; color: #777; } .border-top { background: #b4bcbf; padding: 15px; } .border-top:before { content: ''; position: absolute; left: 42%; top: 0; bottom: auto; right: auto; height: 7px; width: 50%; background-color: #8796a9; } .border-left { background: #dfdad6; padding: 15px; } .border-left:before { content: ''; position: absolute; left: 0; top: 6%; bottom: auto; right: auto; height: 52%; width: 5px; background-color: #a89d9e; } .border-right { background: #eee9c4; padding: 15px; } .border-right:after { content: ''; position: absolute; left: auto; top: auto; bottom: 5px; right: 0; height: 52%; width: 5px; background-color: #f39c81; } .border-bottom { background: #bcdc9d; padding: 15px; } .border-bottom:after { content: ''; position: absolute; left: 18px; top: auto; bottom: 0; right: auto; height: 6px; width: 105px; background-color: #32b66b; }
上述就是小編為大家分享的怎么在CSS中控制邊框長度了,如果剛好有類似的疑惑,不妨參照上述分析進行理解。如果想知道更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
文章名稱:怎么在CSS中控制邊框長度-創(chuàng)新互聯(lián)
路徑分享:http://bm7419.com/article12/ipidc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站維護、做網(wǎng)站、小程序開發(fā)、響應(yīng)式網(wǎng)站、軟件開發(fā)、外貿(mào)建站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容