溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“在HTML前端開發(fā)中怎么對<div>設(shè)置邊框”，在日常操作中，相信很多人在在HTML前端開發(fā)中怎么對<div>設(shè)置邊框問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”在HTML前端開發(fā)中怎么對<div>設(shè)置邊框”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
一、div加四邊加邊框
1、用到css單詞與值
border:1px solid #F00
設(shè)置對象邊框?yàn)榧t色邊框
2、div完整小實(shí)例實(shí)例代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.CSS5.com.cn</title> <style> .a-4{ border:1px solid #F00} </style> </head> <body> <div class="a-4">四邊為赤色</div> </body> </html>實(shí)例截圖：
經(jīng)由border輕松配置div 4條邊邊框
二、div上邊加邊框
1、使用單詞和值
border-top:1px solid #F00
2、殘缺實(shí)例代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.CSS5.com.cn</title> <style> .a-top{ border-top:1px solid #F00} </style> </head> <body> <div class="a-top">只配置div上邊框</div> </body> </html>3、效果截圖
三、div下邊加邊框
1、應(yīng)用單詞與值
border-bottom:1px solid #000
2、完整實(shí)例代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.CSS5.com.cn</title> <style> .a-bottom{ border-bottom:1px solid #000} </style> </head> <body> <div class="a-bottom">只配置div下邊框</div> </body> </html>3、截圖配置DIV彩色的下邊框
四、div左邊加邊框
1、應(yīng)用單詞與值
border-left:1px solid #000
2、完整源代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.CSS5.com.cn</title> <style> .a-left{ border-left:1px solid #000} </style> </head> <body> <div class="a-left">只設(shè)置div 左邊框</div> </body> </html>3、截圖
五、div右側(cè)加邊框
1、DIV的左邊框應(yīng)用單詞和值
border-right:1px dashed #F00
2、代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.CSS5.com.cn</title> <style> .a-right{border-right:3px dashed #F00} </style> </head> <body> <div class="a-right">只設(shè)置div右側(cè)邊框</div> </body> </html>對DIV設(shè)置血色虛線邊框
3、截圖
六、div三邊加邊框 手法
1、才略先設(shè)置border值，即設(shè)置裝備擺設(shè)對象4邊均有邊框，那條div邊不重要配置邊框，就對其再設(shè)置邊框?yàn)?的值。
2、完整HTML源代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.CSS5.com.cn</title> <style> .a-san{border:3px solid #F00; border-bottom:0} </style> </head> <body> <div class="a-san">三邊有邊框，其他一邊沒有邊框</div> </body> </html>設(shè)置裝備擺設(shè)下邊框沒有邊框，其它三邊設(shè)置裝備擺設(shè)邊框。——下邊框不設(shè)置裝備擺設(shè)邊框。
3、截圖
4、表白需要把穩(wěn)，先配置4邊CSS，再后頭設(shè)置裝備擺設(shè)去掉邊框花樣，這樣閱讀器端，從左往右讀取時(shí)辰，能襯著先4邊，后缺一邊的結(jié)構(gòu)功效。獨(dú)霸了客戶端讀庖代碼從左往右讀取的能力。
七、div 虛線邊框與實(shí)線邊框
在上面實(shí)例代碼教程中，能夠看到border的值中其中一個(gè)單詞為solid，即設(shè)置邊框名堂為實(shí)體線。
常用的兼容各大瀏覽器的虛線為dashed 即實(shí)例代碼：
border:1px dashed #000
設(shè)置裝備擺設(shè)邊框1px虛線彩色邊框（#000 黑色彩值，實(shí)際組織中正確色調(diào)值遵照希圖圖經(jīng)由PS拾色東西失掉）
即：
border:1px dashed #000 —— 虛線1px厚度寬度玄色邊框 border:1px solid #000 ——實(shí)線1px厚度寬度玄色邊框
到此，關(guān)于“在HTML前端開發(fā)中怎么對<div>設(shè)置邊框”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼