DIV+CSS實例虛線邊框|CSS虛線下劃線及虛線用應(yīng)

2024-07-11 08:35:05

字體：大中小

供稿：網(wǎng)友

1、CSS邊框虛線 – TOP
這里通過邊框?qū)傩缘奶摼€邊框border控制虛線。以下設(shè)置的css 高度(css height)和css 寬度（css width）為350像素是為了便于觀看演示其它意思。
一、四邊為虛線邊框

復(fù)制代碼代碼如下:border:1px dashed #000; 黑色虛線邊框[code/]實例：
CSS代碼： [code].divcss5{border:1px dashed #000; height:50px;width:350px}
Html代碼：
復(fù)制代碼代碼如下:<div class=”divcss5″>我的四邊為黑色虛線邊框</div>
這里設(shè)置邊框縮寫方式定義divcss5選擇器四邊邊框為1px的黑色虛線邊框

二、左邊為虛線：
CSS代碼：
復(fù)制代碼代碼如下:.divcss5-1{border-left:1px dashed #000; height:50px;width:350px}
Html代碼：
復(fù)制代碼代碼如下:<div class=”divcss5-1″>我的左邊為黑色虛線邊框</div>
這里設(shè)置了左邊一邊為黑色虛線邊框

三、右邊為虛線：
CSS代碼：
復(fù)制代碼代碼如下:.divcss5-2{border-right:1px dashed #000; height:50px;width:350px}
Html代碼：
復(fù)制代碼代碼如下:<div class=”divcss5-2″>我的右邊為黑色虛線邊框</div>
這里設(shè)置了右邊一邊為黑色虛線邊框

四、頂部邊（上邊）為虛線：
CSS代碼：
復(fù)制代碼代碼如下:.divcss5-3{border-top:1px dashed #000; height:50px;width:350px}
Html代碼：
復(fù)制代碼代碼如下:<div class=”divcss5-3″>我的上邊為黑色虛線邊框</div>
這里設(shè)置了頂邊（上邊線）一邊為黑色虛線邊框

五、底部邊（下邊）為虛線：
CSS代碼：
復(fù)制代碼代碼如下:.divcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}
Html代碼：
復(fù)制代碼代碼如下:<div class=”divcss5-4″>我的下邊為黑色虛線邊框</div>
這里設(shè)置了底邊（下邊線）一邊為黑色虛線邊框

六、任意一邊不為虛線，其它三邊為虛線情況
加入右邊邊框不為虛線而沒有邊線，其它三邊為黑色虛線邊框
CSS代碼：
復(fù)制代碼代碼如下:.divcss5-5{border:1px dashed #000;border-right:0; height:50px;width:350px}
Html代碼：
復(fù)制代碼代碼如下:<div class=”divcss5-5″>我的右邊邊框無邊線而其它三邊為黑色虛線邊框?qū)嵗?lt;/div>
這里通過先設(shè)置了該對象四邊為黑色1px虛線邊框，緊接著又設(shè)置一邊邊線為0的設(shè)置，這樣相當(dāng)于設(shè)置了3邊的邊框虛線屬性，但是這里注意邊框?qū)傩栽O(shè)置前后順序。
以上實例完整DIV+CSS代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=”gb2312″ />
<title>CSS 虛線 DIVCSS5實例說明www.divcss5.com</title>