您好,登錄后才能下訂單哦!
這篇“css怎么加虛線實體線框樣式”文章的知識點大部分人都不太理解,所以小編給大家總結了以下內容,內容詳細,步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“css怎么加虛線實體線框樣式”文章吧。
1、html標簽:
div
2、css邊框花樣屬性:
border
3、設置單邊邊框:
border-left —— 左邊框
border-right —— 右邊框
border-top ——上邊框
border-bottom ——下邊框
4、配置邊框粗細
border-width:2px —— 邊框粗細寬度為2px
border:2px —— 縮寫——邊框粗細寬度為2px
border-bottom-width:4px ——單設下邊框寬度粗細為4px
5、設置邊框線體技倆與常用邊框border縮寫代碼
border-bottom:1px solid #F00
單設對象下邊框1px實線紅色邊框。
border:2px dashed #F00
配置邊框(4條邊)紅色2px寬度(厚度)虛線邊框樣式
邊框配置格局代碼分解圖
上面簡介邊框border代碼及苦守,今后在html構造中具體div中使用給div加邊框屬性樣式。
可能對div通過class設置邊框,也籠統使用id決意器設置實體或虛線邊框。
html div加邊框實例代碼:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div +邊框 名目配置</title> <style> .abc{ border:1px solid #F00; width:300px} #efg{ border:2px dashed #06F;width:300px} .aa{ border-left:3px solid #090;width:300px} </style> </head> <body> <div class="abc">用class對div設置裝備擺設紅色實線邊框</div> <div class="aa">用class只對div左設置裝備擺設3px實體線綠色邊框(左邊框)</div> <div id="efg">用id對div配置2px寬度藍色虛線邊框</div> </body> </html>
使用class與id 花色選擇器,分別對3個div設置加一致的邊框款式。
考察成果截圖
html實例用div配置虛線+實線功效圖
誠然假如不想使用class和id對div配置須要的邊框技倆,也能夠在html代碼中的div使用style直接行內設置裝備擺設邊框名目。
<div style="border:1px dashed #000">使用style直接對div設置裝備擺設黑色虛線邊框</div>
以上就是關于“css怎么加虛線實體線框樣式”這篇文章的內容,相信大家都有了一定的了解,希望小編分享的內容對大家有幫助,若想了解更多相關的知識內容,請關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。