溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇“css怎么加虛線實(shí)體線框樣式”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“css怎么加虛線實(shí)體線框樣式”文章吧。
1、html標(biāo)簽：
div
2、css邊框花樣屬性：
border
3、設(shè)置單邊邊框：
border-left —— 左邊框
border-right —— 右邊框
border-top ——上邊框
border-bottom ——下邊框
4、配置邊框粗細(xì)
border-width:2px —— 邊框粗細(xì)寬度為2px
border:2px —— 縮寫——邊框粗細(xì)寬度為2px
border-bottom-width:4px ——單設(shè)下邊框?qū)挾却旨?xì)為4px
5、設(shè)置邊框線體技倆與常用邊框border縮寫代碼
border-bottom:1px solid #F00
單設(shè)對(duì)象下邊框1px實(shí)線紅色邊框。
border:2px dashed #F00
配置邊框（4條邊）紅色2px寬度（厚度）虛線邊框樣式
邊框配置格局代碼分解圖
上面簡(jiǎn)介邊框border代碼及苦守，今后在html構(gòu)造中具體div中使用給div加邊框?qū)傩詷邮健?/p>
可能對(duì)div通過(guò)class設(shè)置邊框，也籠統(tǒng)使用id決意器設(shè)置實(shí)體或虛線邊框。
html div加邊框?qū)嵗a：
<!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對(duì)div設(shè)置裝備擺設(shè)紅色實(shí)線邊框</div>
<div class="aa">用class只對(duì)div左設(shè)置裝備擺設(shè)3px實(shí)體線綠色邊框（左邊框）</div>
<div id="efg">用id對(duì)div配置2px寬度藍(lán)色虛線邊框</div>
</body>
</html>使用class與id 花色選擇器，分別對(duì)3個(gè)div設(shè)置加一致的邊框款式。
考察成果截圖
html實(shí)例用div配置虛線+實(shí)線功效圖
誠(chéng)然假如不想使用class和id對(duì)div配置須要的邊框技倆，也能夠在html代碼中的div使用style直接行內(nèi)設(shè)置裝備擺設(shè)邊框名目。
<div style="border:1px dashed #000">使用style直接對(duì)div設(shè)置裝備擺設(shè)黑色虛線邊框</div>
以上就是關(guān)于“css怎么加虛線實(shí)體線框樣式”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼