首頁 > 文章 > web前端 > 常見的CSS 虛線實例教學

常見的CSS 虛線實例教學

零下一度原創: 2017-06-16 13:53:422683瀏覽

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代碼： 0fd95622ee3d539259ddb2dd2ba82a65我的四邊為黑色虛線邊框16b28748ea4df4d9c2150843fecfba68
這裡設定邊框縮寫方式定義divcss5選擇器四邊邊框為1px的黑色虛線邊框

二、左邊為虛線：
CSS代碼： .divcss5-1{border-left:1px dashed #000; height:50px;width:350px }
Html程式碼： 8dc7f26bbeb0b2d87fad8d7057caf02b我的左邊為黑色虛線邊框16b28748ea4df4d9c2150843fecfba68
這裡設置了左邊一邊為黑色虛線邊框

三、右邊為虛線：
CSS程式碼： .divcss5-2{border-right:1px dashed #000; height:50px;width:350px}
Html程式碼： e1fb1ce5043ca7d6bb8d997f43d867f3我的右邊為黑色虛線邊框16b28748ea4df4d9c2150843fecfba68
這裡設置了右邊一邊為黑色虛線邊框

四、頂部邊（上邊）為虛線：
CSS程式碼： .divcss5-3{border-top:1px dashed #000; height:50px;width:350px}
Html程式碼： c01375deed980076d35367a1218bebb7我的上邊為黑色虛線邊框16b28748ea4df4d9c2150843fecfba68
這裡設置了頂邊（上邊線）一邊為黑色虛線邊框

五、底部邊（下邊）為虛線：
CSS代碼： .divcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}
Html代碼： 8de9b8c1fb9699c8b3b7c3e5586585c1我的下邊為黑色虛線邊框16b28748ea4df4d9c2150843fecfba68
這裡設定了底邊（下邊線）一邊為黑色虛線邊框

六、任一邊不為虛線，其它三邊為虛線情況
加入右邊邊框不為虛線而沒有邊線，其它三邊為黑色虛線邊框
CSS代碼： .divcss5-5{border:1px dashed #000;border-right:0; height:50px;width :350px}
Html程式碼： c4a633836d3210c4eccf46c53c0aaf8d我的右邊邊框無邊線而其它三邊為黑色虛線邊框實例16b28748ea4df4d9c2150843fecfba68
這裡通過先設置了該它三邊為黑色虛線邊框實例16b28748ea4df4d9c2150843fecfba68

這裡通過先設置了該通過先設置了該物件四邊為黑色1px虛線邊框，緊接著又設置一邊邊線為0的設置，這樣相當於設置了3邊的邊框虛線屬性，但是這裡注意邊框屬性設置前後順序。

以上實例完整DIV+CSS程式碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>CSS 虚线 DIVCSS5实例说明<title>www.php.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}
/* www.divcss5.com实例 */
</style>
</head>
<body>
www.divcss5.com css虚线实例实例<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">我的右边边框无边线而其它三边为黑色虚线边框实例</div>
</body>
</html>

2、超連結虛線下劃線

我們常常會設定被連結的文字內容要么有連結有虛線的底線，或滑鼠移動到有連結的文字上出現虛線下劃線，這個怎麼實現的呢，這裡為大家介紹關於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 虚线下划线 DIVCSS5实例说明</title><style>a{ border-bottom:1px dashed #111;text-decoration:none;}a:hover{ border:0;}</style></head>
<body>欢迎到<a href="www.php.cn">CSS教程网</a>的www.php.cn- divcss5学习CSS</body></html>

說明：text-decoration:none;這個是去掉CSS 底線（超連結預設自帶的底線屬性）###

以上是常見的CSS 虛線實例教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css3中關於邊框實例的詳解下一篇：css3中關於邊框實例的詳解

看更多