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