DIV和CSS實現虛線邊框|CSS虛線底線及虛線的方法

來源:互聯網
上載者:User
這篇文章主要介紹了關於DIV和CSS實現虛線邊框|CSS虛線底線及虛線的方法,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

這裡通過邊框屬性的虛線邊框border控制虛線

1、CSS邊框虛線 - TOP
這裡通過邊框屬性的虛線邊框border控制虛線。以下設定的css 高度(css height)和css 寬度(css width)為350像素是為了便於觀看示範 其它意思。

一、四邊為虛線邊框

border:1px dashed #000; 黑色虛線邊框[code/]

執行個體:
CSS代碼:

[code].pcss5{border:1px dashed #000; height:50px;width:350px}

Html代碼:

<p class="pcss5">我的四邊為黑色虛線邊框</p>

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

二、左邊為虛線:

CSS代碼:

.pcss5-1{border-left:1px dashed #000; height:50px;width:350px}

Html代碼:

<p class="pcss5-1">我的左邊為黑色虛線邊框</p>

這裡設定了左邊一邊為黑色虛線邊框

三、右邊為虛線:

CSS代碼:

.pcss5-2{border-right:1px dashed #000; height:50px;width:350px}

Html代碼:

<p class="pcss5-2">我的右邊為黑色虛線邊框</p>

這裡設定了右邊一邊為黑色虛線邊框

四、頂部邊(上邊)為虛線:

CSS代碼:

.pcss5-3{border-top:1px dashed #000; height:50px;width:350px}

Html代碼:

<p class="pcss5-3">我的上邊為黑色虛線邊框</p>

這裡設定了頂邊(上邊線)一邊為黑色虛線邊框

五、底部邊(下邊)為虛線:

CSS代碼:

.pcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}

Html代碼:

<p class="pcss5-4">我的下邊為黑色虛線邊框</p>

這裡設定了底邊(下邊線)一邊為黑色虛線邊框

六、任意一邊不為虛線,其它三邊為虛線情況

加入右邊邊框不為虛線而沒有邊線,其它三邊為黑色虛線邊框

CSS代碼:

.pcss5-5{border:1px dashed #000;border-right:0; height:50px;width:350px}

Html代碼:

<p class="pcss5-5">我的右邊邊框無邊線而其它三邊為黑色虛線邊框執行個體</p> 這裡通過先設定了該對象四邊為黑色1px虛線邊框,緊接著又設定一邊邊線為0的設定,這樣相當於設定了3邊的邊框虛線屬性,但是這裡注意邊框屬性設定前後順序。 以上執行個體完整p+CSS代碼如下: <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>CSS 虛線 pCSS5執行個體說明www.pcss5.com</title> <style> .pcss5{ border:1px dashed #000; height:50px; width:350px} .pcss5-1{border-left:1px dashed #000; height:50px;width:350px} .pcss5-2{border-right:1px dashed #000; height:50px;width:350px} .pcss5-3{border-top:1px dashed #000; height:50px;width:350px} .pcss5-4{border-bottom:1px dashed #000; height:50px;width:350px} .pcss5-5{border:1px dashed #000; border-right:0;height:50px;width:350px} /* www.pcss5.com執行個體 */ </style> </head> <body> www.pcss5.com css虛線執行個體執行個體<p class="pcss5">我四邊為虛線邊框</p><p class="pcss5-1">我的左邊為黑色虛線邊框</p><p class="pcss5-2">我的右邊為黑色虛線邊框</p><p class="pcss5-3">我的上邊為黑色虛線邊框</p><p class="pcss5-4">我的下邊為黑色虛線邊框</p><p class="pcss5-5">我的右邊邊框無邊線而其它三邊為黑色虛線邊框執行個體</p> </body> </html>

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 虛線底線 pCSS5執行個體說明</title> <style> a{ border-bottom:1px dashed #111;text-decoration:none;} a:hover{ border:0;} </style> </head> <body> 歡迎到<a href="http://www.pcss5.com/">CSS教程網</a>的www.pcss5.com - pcss5學習CSS </body> </html>

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

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

二、滑鼠放到帶連結文字上時出現虛線底線

這個和上面的很相似,只需對超連結 A去掉底線,對滑鼠經過時CSS文字下方帶虛線邊框底線即可。

對應CSS代碼:

a{text-decoration:none;}[/code]a:hover{border-bottom:1px dashed #111;} [/code]

這樣就實現,大家不妨試試超連結底線執行個體。

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

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

這裡帶過即可如下:

對p設定水平虛線線:

.pcss5{ height:1px; width:100%; border-bottom:1px dashed #000;}

對應HTML代碼:

<p class="pcss5"></p>

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

以上就是本文的全部內容,希望對大家的學習有所協助,更多相關內容請關注topic.alibabacloud.com!

相關文章

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.