首頁 > 開發者 > 網站開發

DIV+CSS虛線邊框|CSS虛線底線及虛線列表教程

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

標籤：str   相同   dash   進入   tab   href   css   通過   詳細   

 

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

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

目錄
  1. CSS虛線邊框
  2. CSS超連結虛線底線
  3. 列表型CSS虛線底線
  4. CSS定義一條水平虛線
1、CSS邊框虛線   -   TOP

這裡通過邊框屬性的虛線邊框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.divcss5.com</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> 
 

 

以上示範各種顏色的虛線邊框，如想更加詳細瞭解CSS border(CSS 邊框)可進入：http://www.divcss5.com/rumen/r120.shtml

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 虛線底線 DIVCSS5執行個體說明</title>
<style>
a{ border-bottom:1px dashed #111;text-decoration:none;}
a:hover{ border:0;}
</style>
</head>

<body>
歡迎到<a href="http://www.divcss5.com/">CSS教程網</a>的www.divcss5.com - divcss5學習CSS
</body>
</html> 


 

 

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


以上為有CSS超連結的文字帶虛線底線。

二、滑鼠放到帶連結文字上時出現虛線底線
這個和上面的很相似，只需對超連結 A去掉底線，對滑鼠經過時CSS文字下方帶虛線邊框底線即可。
對應CSS代碼：
a{text-decoration:none;}
a:hover{border-bottom:1px dashed #111;}
這樣就實現，大家不妨試試超連結底線執行個體。

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

這個很好理解同樣可以使用對div對象設定邊框虛線即可實現同時也可以對hr水平線標籤設定虛線屬性即可實現水平虛線分割線。

這裡帶過即可如下：
對div設定水平虛線線：
.divcss5{ height:1px; width:100%; border-bottom:1px dashed #000;}
對應HTML代碼：
<div class="divcss5"></div>

對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設定，如果網頁多次出現可以減少代碼量。

以上所有的CSS虛線涉及了css borer、CSS 底線、CSS 背景等知識，希望大家能掌握各種方法設定DIV虛線、虛線邊框、DIV CSS虛線底線的方法。

 

 

轉至：http://www.divcss5.com/shili/s296.shtml

DIV+CSS虛線邊框|CSS虛線底線及虛線列表教程

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

相關關鍵詞：
css div table generator beautiful div box css css center div horizontally how to make div centered in css how to set css class on div in reactjs component output css css ellipsis
相關文章
自學成才的秘密：115個 web Develop 資源_經典網摘
H5 中html 頁面存為圖片並長按 儲存
__x__(20)0907第四天__ css 框模型
SVN提示https認證驗證失敗問題svn: E230001: Server SSL certificate verifi...
JS如何判斷文字是全形還是半形（轉載）
Citrix NetScaler產品學習筆記之一：Citrix NetScaler概述

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： 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