常見的CSS 虛線實例教學-css教學-PHP中文網

首頁

web前端

css教學

常見的CSS 虛線實例教學

零下一度

Jun 16, 2017 pm 01:53 PM

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代碼：

我的四邊為黑色虛線邊框

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

二、左邊為虛線：
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程式碼：

我的右邊邊框無邊線而其它三邊為黑色虛線邊框實例

這裡通過先設置了該它三邊為黑色虛線邊框實例這裡通過先設置了該通過先設置了該物件四邊為黑色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