這篇文章主要介紹了關於DIV和CSS實現虛線邊框|CSS虛線下劃線及虛線的方法，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
#這裡透過邊框屬性的虛線邊框border控制虛線
1、CSS邊框虛線- TOP
這裡透過邊框屬性的虛線邊框border控制虛線。以下設定的css 高度(css height)和css 寬度（css width）為350像素是為了便於觀看演示 其它意思。
一、四邊為虛線邊框
border:1px dashed #000; 黑色虚线边框[code/]
實例：
CSS程式碼：
[code].pcss5{border:1px dashed #000; height:50px;width:350px}Html程式碼：
<p class="pcss5">我的四边为黑色虚线边框</p>
這裡設定邊框縮寫方式定義pcss5選擇器四邊邊框為1px的黑色虛線邊框
#二、左邊為虛線：
CSS程式碼：
.pcss5-1{border-left:1px dashed #000; height:50px;width:350px}Html程式碼：
<p class="pcss5-1">我的左边为黑色虚线边框</p>
這裡設定了左邊一邊為黑色虛線邊框
三、右邊為虛線：
CSS程式碼：
.pcss5-2{border-right:1px dashed #000; height:50px;width:350px}Html程式碼：
<p class="pcss5-2">我的右边为黑色虚线边框</p>
這裡設置了右邊一邊為黑色虛線邊框
四、頂部邊（上邊）為虛線：
CSS代碼：
.pcss5-3{border-top:1px dashed #000; height:50px;width:350px}Html程式碼：
<p class="pcss5-3">我的上边为黑色虚线边框</p>
這裡設定了頂邊（上邊線）一邊為黑色虛線邊框
五、底部邊（下邊）為虛線：
#CSS程式碼：
.pcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}Html程式碼：
<p class="pcss5-4">我的下边为黑色虚线边框</p>
這裡設定了底邊（下邊線）一邊為黑色虛線邊框
六、任一邊不為虛線，其它三邊為虛線狀況
加入右邊邊框不為虛線而沒有邊線，其它三邊為黑色虛線邊框
CSS代碼：
.pcss5-5{border:1px dashed #000;border-right:0; height:50px;width:350px}Html代碼：
我的右边边框无边线而其它三边为黑色虚线边框实例
这里通过先设置了该对象四边为黑色1px虚线边框，紧接着又设置一边边线为0的设置，这样相当于设置了3边的边框虚线属性，但是这里注意边框属性设置前后顺序。 以上实例完整p+CSS代码如下：CSS 虚线 pCSS5实例说明www.pcss5.com www.pcss5.com css虚线实例实例我四边为虚线边框
<p class="pcss5-1">我的左边为黑色虚线边框</p> <p class="pcss5-2">我的右边为黑色虚线边框</p> <p class="pcss5-3">我的上边为黑色虚线边框</p> <p class="pcss5-4">我的下边为黑色虚线边框</p>我的右边边框无边线而其它三边为黑色虚线边框实例
2、超連結虛線下劃線- TOP
我們常常會設定被連結的文字內容要嘛帶連結有虛線的下劃線，或滑鼠移動到有連結的文字上出現虛線下劃線，這個怎麼實現的呢，這裡為大家介紹關於CSS超連結的虛線下劃線。
一、附連結文字有虛線底線
這裡也是透過CSS border邊框屬性來控制超連結a物件的CSS樣式。
示範CSS程式碼：
a{ border-bottom:1px dashed #111;}/* 这里设置带链接文字下方出现虚线下划线*/a:hover{ border:0;}/* 这里设置鼠标经过被链接文字时不出现虚线 */ 完整div CSS程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>CSS 虚线下划线 pCSS5实例说明</title>
<style>
a{ border-bottom:1px dashed #111;text-decoration:none;}
a:hover{ border:0;}
</style>
</head>
<body>
欢迎到<a href="http://www.pcss5.com/">CSS教程网</a>的www.pcss5.com - pcss5学习CSS
</body>
</html>說明：text-decoration:none;這個是去掉CSS 底線（超連結預設自帶的底線屬性）
以上為有CSS超連結的文字帶虛線下劃線。
二、滑鼠放到帶連結文字上時出現虛線下劃線
這個和上面的很相似，只需對超連結A去掉下劃線，對滑鼠經過時CSS文字下方帶虛線邊框下劃線即可。
對應CSS程式碼：
a{text-decoration:none;}
[/code]a:hover{border-bottom:1px dashed #111;} [/code]這樣就實現，大家不妨試試超連結底線實例。
3、列表型CSS虛線下劃線- TOP
常常他們碰到CSS LI的時候希望此CSS 列表樣式每排內容下方為虛線分割開如下圖
這裡我們只需對LI設定底部邊框為虛線邊框即可。
首先我們是在對CSS初始化情況下設定CSS程式碼：
li{border-bottom:1px dashed #111;}即可實現li的列表型內容如上圖虛線隔開效果（每個li內容底部為虛線邊框）
還有我們常常碰見li的底部虛線很小就如一個點那麼小，而border就很難實現了，這個時候我們需要一張虛線的點圖片即可(一邊高1像素寬3像素的1像素顏色圖片即可實現)
對應CSS li代碼：
Li{background:url(点图片路径) repeat-x 0 bottom}這裡不再詳細演示我們在VIP也為大家詳細介紹和演示製作各種li的CSS知識點。
4、CSS定義一條水平虛線- TOP
這個很好理解同樣可以使用對p物件設定邊框虛線即可實現同時也可以對hr水平線標籤設定虛線屬性即可實現水平虛線分割線。
這裡帶過即可如下：
對p設定水平虛線線：
.pcss5{ height:1px; width:100%; border-bottom:1px dashed #000;}對應HTML代碼：
<p class="pcss5"></p>
對hr水平分割線設定屬性：
第一種，hr標籤內設定虛線屬性：
<hr size=1 style="color: blue;border-style:dashed ;width:100%">
這裡說明的是size為hr的值，一邊設定為1即可。
第二種在css程式碼或CSS檔案定義hr的css屬性
hr {border-top:1px dashed #00F ; }對應html內hr標題程式碼：
<hr size=1>
這裡是對hr設定邊框為頂部或底部上下邊任一條邊為1像素的藍色虛線邊框，同時設定hr的size為1，和第一種值大致相同，唯一區別在於當在html中出現了hr標籤， hr標籤屬性就為css設置，如果網頁多次出現可以減少程式碼量。
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關建議：
CSS3中的Transition過度與Animation動畫屬性的使用介紹
以上是DIV和CSS實現虛線邊框|CSS虛線下劃線及虛線的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
