常見的CSS 虛線實例教學

DIV CSS虛線教學篇包括講解常出現的各種樣式的DIV虛線案例CSS教學。

本節為大家介紹常見的CSS 虛線及DIV教學。 CSS虛線下劃線、列表虛線統統搞定。

1、CSS邊框虛線

這裡透過邊框屬性的虛線邊框border控制虛線。以下設定的css 高度(css height)和css 寬度（css width）為350像素是為了便於觀看演示 其它意思。
一、四邊為虛線邊框
border:1px dashed #000; 黑色虛線邊框
實例：
CSS程式碼： .divcss5{border:1px dashed #000; height :50px;width:350px}
Html代碼：

二、左邊為虛線：
CSS代碼： .divcss5-1{border-left:1px dashed #000; height:50px;width:350px }
Html程式碼：

三、右邊為虛線：
CSS程式碼： .divcss5-2{border-right:1px dashed #000; height:50px;width:350px}
Html程式碼：

四、頂部邊（上邊）為虛線：
CSS程式碼： .divcss5-3{border-top:1px dashed #000; height:50px;width:350px}
Html程式碼：

五、底部邊（下邊）為虛線：
CSS代碼： .divcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}
Html代碼：

六、任一邊不為虛線，其它三邊為虛線情況
加入右邊邊框不為虛線而沒有邊線，其它三邊為黑色虛線邊框
CSS代碼： .divcss5-5{border:1px dashed #000;border-right:0; height:50px;width :350px}
Html程式碼：