1、CSS邊框虛線 - TOP
這里通過邊框屬性的虛線邊框border控制虛線。以下設置的css 高度(css height)和css 寬度（css width）為350像素是為了便于觀看演示 其它意思。
一、四邊為虛線邊框


Html代碼：

這里設置邊框縮寫方式定義divcss5選擇器四邊邊框為1px的黑色虛線邊框

二、左邊為虛線：
CSS代碼：

Html代碼：

這里設置了左邊一邊為黑色虛線邊框

三、右邊為虛線：
CSS代碼：

Html代碼：

這里設置了右邊一邊為黑色虛線邊框

四、頂部邊（上邊）為虛線：
CSS代碼：

Html代碼：

這里設置了頂邊（上邊線）一邊為黑色虛線邊框

五、底部邊（下邊）為虛線：
CSS代碼：

Html代碼：

這里設置了底邊（下邊線）一邊為黑色虛線邊框

六、任意一邊不為虛線，其它三邊為虛線情況
加入右邊邊框不為虛線而沒有邊線，其它三邊為黑色虛線邊框
CSS代碼：

Html代碼：



2、超鏈接虛線下劃線 - TOP
我們常常會設置被鏈接的文字內容要么帶鏈接有虛線的下劃線，或鼠標移動到有鏈接的文字上出現(xiàn)虛線下劃線，這個怎么實現(xiàn)的呢，這里為大家介紹關于CSS超鏈接的虛線下劃線。

一、帶鏈接文字有虛線下劃線
這里也是通過CSS border邊框屬性來控制超鏈接a對象的CSS樣式。

演示CSS代碼：





完整DIV CSS代碼：







說明：text-decoration:none;這個是去掉CSS 下劃線（超鏈接默認自帶的下劃線屬性）



以上為有CSS超鏈接的文字帶虛線下劃線。

二、鼠標放到帶鏈接文字上時出現(xiàn)虛線下劃線
這個和上面的很相似，只需對超鏈接 A去掉下劃線，對鼠標經過時CSS文字下方帶虛線邊框下劃線即可。
對應CSS代碼：


[/code]a:hover{border-bottom:1px dashed #111;} [/code]
這樣就實現(xiàn)，大家不妨試試超鏈接下劃線實例。

3、列表型CSS虛線下劃線 - TOP
常常他們碰到CSS LI的時候希望此CSS 列表樣式每排內容下方為虛線分割開如下圖

這里我們只需對LI設置底部邊框為虛線邊框即可。
首先我們是在對CSS初始化情況下設置CSS代碼：

即可實現(xiàn)li的列表型內容如上圖虛線隔開效果（每個li內容底部為虛線邊框）
還有我們常常碰見li的底部虛線很小就如一個點那么小，而border就很難實現(xiàn)了，這個時候我們需要一張?zhí)摼€的點圖片即可(一邊高1像素寬3像素的1像素顏色圖片即可實現(xiàn))
對應CSS li代碼：


這里不再詳細演示我們在VIP也為大家詳細介紹和演示制作各種li的CSS知識點。

4、CSS定義一條水平虛線 - TOP
這個很好理解同樣可以使用對div對象設置邊框虛線即可實現(xiàn)同時也可以對hr水平線標簽設置虛線屬性即可實現(xiàn)水平虛線分割線。

這里帶過即可如下：
對div設置水平虛線線：


對應HTML代碼：



對hr水平分割線設置屬性：
第一種，hr標簽內設置虛線屬性：



這里說明的是size為hr的值，一邊設置為1即可。

第二種在css代碼或CSS文件中定義hr的css屬性


對應html內hr標題代碼：


這里是對hr設置邊框為頂部或底部上下邊任意一條邊為1像素的藍色虛線邊框，同時設置hr的size為1，和第一種值大致相同，唯一區(qū)別在于當在html中出現(xiàn)了hr標簽，hr標簽屬性就為css設置，如果網頁多次出現(xiàn)可以減少代碼量。

以上所有的CSS虛線涉及了css borer、CSS 下劃線、CSS 背景等知識，希望大家能掌握各種方法設置DIV虛線、虛線邊框、DIV CSS虛線下劃線的方法。

最新評論