這里通過(guò)邊框?qū)傩缘奶摼€邊框border控制虛線。以下設(shè)置的css 高度(css height)和css 寬度（css width）為350像素是為了便于觀看演示 其它意思。
border:1px dashed #000; 黑色虛線邊框
實(shí)例：
免費(fèi)AI編程助手
CSS代碼： .divcss5{border:1px dashed #000; height:50px;width:350px}
Html代碼： <div class="divcss5">我的四邊為黑色虛線邊框</div>這里設(shè)置邊框縮寫方式定義divcss5選擇器四邊邊框?yàn)?px的黑色虛線邊框
CSS代碼： .divcss5-1{border-left:1px dashed #000; height:50px;width:350px}
Html代碼： <div class="divcss5-1">我的左邊為黑色虛線邊框</div>這里設(shè)置了左邊一邊為黑色虛線邊框
CSS代碼： .divcss5-2{border-right:1px dashed #000; height:50px;width:350px}
Html代碼： <div class="divcss5-2">我的右邊為黑色虛線邊框</div>這里設(shè)置了右邊一邊為黑色虛線邊框
CSS代碼： .divcss5-3{border-top:1px dashed #000; height:50px;width:350px}
Html代碼： <div class="divcss5-3">我的上邊為黑色虛線邊框</div>這里設(shè)置了頂邊（上邊線）一邊為黑色虛線邊框
CSS代碼： .divcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}
Html代碼： <div class="divcss5-4">我的下邊為黑色虛線邊框</div>這里設(shè)置了底邊（下邊線）一邊為黑色虛線邊框
加入右邊邊框不為虛線而沒(méi)有邊線，其它三邊為黑色虛線邊框
CSS代碼： .divcss5-5{border:1px dashed #000;border-right:0; height:50px;width:350px}
Html代碼： <div class="divcss5-5">我的右邊邊框無(wú)邊線而其它三邊為黑色虛線邊框?qū)嵗?lt;/div>這里通過(guò)先設(shè)置了該對(duì)象四邊為黑色1px虛線邊框，緊接著又設(shè)置一邊邊線為0的設(shè)置，這樣相當(dāng)于設(shè)置了3邊的邊框虛線屬性，但是這里注意邊框?qū)傩栽O(shè)置前后順序。
以上實(shí)例完整 DIV+CSS 代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>CSS 虛線 DIVCSS5實(shí)例說(shuō)明<title>hgci.cn</title>
<style>
.divcss5{ border:1px dashed #000; height:50px; width:350px}
.divcss5-1{border-left:1px dashed #000; height:50px;width:350px}
.divcss5-2{border-right:1px dashed #000; height:50px;width:350px}
.divcss5-3{border-top:1px dashed #000; height:50px;width:350px}
.divcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}
.divcss5-5{border:1px dashed #000; border-right:0;height:50px;width:350px}
/* hgci.cn實(shí)例 */
</style>
</head>
<body>
hgci.cn css虛線實(shí)例實(shí)例<br>
<div class="divcss5">我四邊為虛線邊框</div><br>
<div class="divcss5-1">我的左邊為黑色虛線邊框</div><br>
<div class="divcss5-2">我的右邊為黑色虛線邊框</div><br>
<div class="divcss5-3">我的上邊為黑色虛線邊框</div><br>
<div class="divcss5-4">我的下邊為黑色虛線邊框</div><br>
<div class="divcss5-5">我的右邊邊框無(wú)邊線而其它三邊為黑色虛線邊框?qū)嵗?lt;/div>
</body>
</html>以上演示各種顏色的虛線邊框，如想更加詳細(xì)了解 CSS border ( CSS 邊框 )可進(jìn)入http://hgci.cn/css/css-border.html
我們常常會(huì)設(shè)置被鏈接的文字內(nèi)容要么帶鏈接有虛線的下劃線，或鼠標(biāo)移動(dòng)到有鏈接的文字上出現(xiàn)虛線下劃線，這個(gè)怎么實(shí)現(xiàn)的呢，這里為大家介紹關(guān)于CSS超鏈接的虛線下劃線。
這里也是通過(guò)CSS border邊框?qū)傩詠?lái)控制超鏈接a對(duì)象的CSS樣式。
演示CSS代碼：
a{ border-bottom:1px dashed #111;}/* 這里設(shè)置帶鏈接文字下方出現(xiàn)虛線下劃線*/
a:hover{ border:0;}/* 這里設(shè)置鼠標(biāo)經(jīng)過(guò)被鏈接文字時(shí)不出現(xiàn)虛線 */完整DIV CSS代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>CSS 虛線下劃線 W3Cschool實(shí)例說(shuō)明</title>
<style>
a{ border-bottom:1px dashed #111;text-decoration:none;}
a:hover{ border:0;}
</style>
</head>
<body>
歡迎到<a href="http://hgci.cn">W3C學(xué)院</a>的hgci.cn - W3Cschool在線教程學(xué)習(xí)CSS
</body>
</html>
說(shuō)明：text-decoration:none;這個(gè)是去掉CSS 下劃線（ 超鏈接 默認(rèn)自帶的下劃線屬性）
這個(gè)和上面的很相似，只需對(duì) 超鏈接 A 去掉下劃線，對(duì)鼠標(biāo)經(jīng)過(guò)時(shí) CSS文字 下方帶虛線邊框下劃線即可。 對(duì)應(yīng) CSS 代碼：
a{text-decoration:none;}
a:hover{border-bottom:1px dashed #111;}這樣就實(shí)現(xiàn)，大家不妨試試超鏈接下劃線實(shí)例。
常常他們碰到CSS LI的時(shí)候希望此CSS 列表樣式每排內(nèi)容下方為虛線分割開(kāi)如下圖
這里我們只需對(duì)LI設(shè)置底部邊框?yàn)樘摼€邊框即可。 首先我們是在對(duì)CSS初始化情況下設(shè)置CSS代碼： li{border-bottom:1px dashed #111;} 即可實(shí)現(xiàn)li的列表型內(nèi)容如上圖虛線隔開(kāi)效果（每個(gè)li內(nèi)容底部為虛線邊框） 還有我們常常碰見(jiàn)li的底部虛線很小就如一個(gè)點(diǎn)那么小，而border就很難實(shí)現(xiàn)了，這個(gè)時(shí)候我們需要一張?zhí)摼€的點(diǎn)圖片即可(一邊高1像素寬3像素的1像素顏色圖片即可實(shí)現(xiàn)) 對(duì)應(yīng)CSS li代碼： Li{background:url(點(diǎn)圖片路徑) repeat-x 0 bottom} 這里不再詳細(xì)演示我們?cè)赩IP也為大家詳細(xì)介紹和演示制作各種li的CSS知識(shí)點(diǎn)。
這個(gè)很好理解同樣可以使用對(duì)div對(duì)象設(shè)置邊框虛線即可實(shí)現(xiàn)同時(shí)也可以對(duì)hr水平線標(biāo)簽設(shè)置虛線屬性即可實(shí)現(xiàn)水平虛線分割線。
這里帶過(guò)即可如下：
對(duì)div設(shè)置水平虛線線：
.divcss5{ height:1px; width:100%; border-bottom:1px dashed #000;}對(duì)應(yīng)HTML代碼：
<div class="divcss5"></div>對(duì)hr水平分割線設(shè)置屬性： 第一種，hr標(biāo)簽內(nèi)設(shè)置虛線屬性：
<hr size=1 style="color: blue;border-style:dashed ;width:100%">
這里說(shuō)明的是size為hr的值，一邊設(shè)置為1即可。
第二種在css代碼或CSS文件中定義hr的css屬性
hr {border-top:1px dashed #00F ; }對(duì)應(yīng)html內(nèi)hr標(biāo)題代碼：
<hr size=1>這里是對(duì)hr設(shè)置邊框?yàn)轫敳炕虻撞可舷逻吶我庖粭l邊為1像素的藍(lán)色虛線邊框，同時(shí)設(shè)置hr的size為1，和第一種值大致相同，唯一區(qū)別在于當(dāng)在html中出現(xiàn)了hr標(biāo)簽，hr標(biāo)簽屬性就為css設(shè)置，如果網(wǎng)頁(yè)多次出現(xiàn)可以減少代碼量。以上所有的CSS虛線涉及了css borer、CSS 下劃線、CSS 背景等知識(shí)，希望大家能掌握各種方法設(shè)置DIV虛線、虛線邊框、DIV CSS虛線下劃線的方法。
