常見的CSS 虛線執行個體教程

最後更新：2017-06-16 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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代碼： <div class="divcss5">我的四邊為黑色虛線邊框</div>
這裡設定邊框縮寫方式定義divcss5選取器四邊邊框為1px的黑色虛線邊框

二、左邊為虛線：
CSS代碼： .divcss5-1{border-left:1px dashed #000; height:50px;width:350px}
Html代碼： <div class="divcss5-1">我的左邊為黑色虛線邊框</div>
這裡設定了左邊一邊為黑色虛線邊框

三、右邊為虛線：
CSS代碼： .divcss5-2{border-right:1px dashed #000; height:50px;width:350px}
Html代碼： <div class="divcss5-2">我的右邊為黑色虛線邊框</div>
這裡設定了右邊一邊為黑色虛線邊框

四、頂部邊（上邊）為虛線：
CSS代碼： .divcss5-3{border-top:1px dashed #000; height:50px;width:350px}
Html代碼： <div class="divcss5-3">我的上邊為黑色虛線邊框</div>
這裡設定了頂邊（上邊線）一邊為黑色虛線邊框

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

六、任意一邊不為虛線，其它三邊為虛線情況
加入右邊邊框不為虛線而沒有邊線，其它三邊為黑色虛線邊框
CSS代碼： .divcss5-5{border:1px dashed #000;border-right:0; height:50px;width:350px}
Html代碼： <div class="divcss5-5">我的右邊邊框無邊線而其它三邊為黑色虛線邊框執行個體</div>
這裡通過先設定了該對象四邊為黑色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 底線（超連結預設內建的底線屬性）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More