CSS虛線實(shí)現(xiàn)方法及多種應(yīng)用實(shí)例

2020-11-16 11:17 更新

很多 CSS 初學(xué)者在前端開(kāi)發(fā)過(guò)程中，經(jīng)常會(huì)用到 CSS 虛線樣式，但是不知道 CSS 虛線樣式該如何實(shí)現(xiàn)，比如一個(gè) CSS 這樣寫(xiě)：?border-style:dotted solid double dashed; ?出來(lái)的框就是：上邊框是點(diǎn)狀，右邊框是實(shí)線，下邊框是雙線，左邊框是虛線，如果一個(gè) CSS 這樣寫(xiě)：border-bottom:1px dashed #000000;出來(lái)的框就是一條寬度為1像素的黑色下劃虛線··· CSS 關(guān)于“線”的類型還真是挺多的，其中新手們比較關(guān)注的還是“虛線的實(shí)現(xiàn)方法”。


css虛線實(shí)現(xiàn)方法

定義和用法：
border-style 屬性用于設(shè)置元素所有邊框的樣式，或者單獨(dú)地為各邊設(shè)置邊框樣式。只有當(dāng)這個(gè)值不是 ?none? 時(shí)邊框才可能出現(xiàn)。

這里邊框?qū)傩缘奶摼€邊框 ?border ?控制虛線。以下配置的 CSS 高度(CSS height)和 CSS 寬度( CSS width)為350像素。

1、四邊為虛線邊框
?border:1px dashed #000;? 黑色虛線邊框

實(shí)例：


實(shí)例

.hackhome{border:1px dashed #000; height:50px;width:350px}


嘗試一下 ?
這里配置邊框縮寫(xiě)形式解釋 ?hackhome? 挑選器四邊邊框?yàn)?px的黑色虛線邊框

2、左邊為虛線：

實(shí)例

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


嘗試一下 ?
這里配置了左邊一邊為黑色虛線邊框

3、右邊為虛線：

實(shí)例

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


嘗試一下 ?
這里配置了右邊一邊為黑色虛線邊框

4、頂部邊(上邊)為虛線：

實(shí)例

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


嘗試一下 ?
這里配置了頂邊(上邊線)一邊為黑色虛線邊框

5、底部邊(下邊)為虛線：

實(shí)例

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


嘗試一下 ?
這里配置了底邊(下邊線)一邊為黑色虛線邊框

6、隨意一邊不為虛線，其它三邊為虛線狀況
參與右邊邊框不為虛線而沒(méi)有邊線，其它三邊為黑色虛線邊框

實(shí)例

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

嘗試一下 ?
這里先配置了該對(duì)象四邊為黑色1px 虛線邊框，緊接著又配置一邊邊線為0的配置，這樣相當(dāng)于配置了3邊的邊框虛線屬性，但是這里留意邊框?qū)傩耘渲们昂箜樞?

常用css虛線樣式

例1
?border-style:dotted solid double dashed;  ?
上邊框是點(diǎn)狀
右邊框是實(shí)線
下邊框是雙線
左邊框是虛線

例2
?border-style:dotted solid double; ?
上邊框是點(diǎn)狀
右邊框和左邊框是實(shí)線
下邊框是雙線

例3
?border-style:dotted solid; ?
上邊框和下邊框是點(diǎn)狀
右邊框和左邊框是實(shí)線

例4
?border-style:dotted; ?
所有 4 個(gè)邊框都是點(diǎn)狀

怎么用CSS實(shí)現(xiàn)鏈接的虛線下劃線效果

修改您的樣式表，找下邊這段（一般都在開(kāi)頭）

a {

color:#3399FF;

font-weight:Normal; /*字體效果 普通 可以改成bold粗體*/

text-decoration:none; /*下劃線效果：無(wú)下劃線*/

}

a:hover {

color:#4499EE;

text-decoration:none; /*下劃線效果：無(wú)下劃線*/

border-bottom: 1px #0099CC dotted /*加一個(gè)只有下邊的框 邊框?yàn)樘摼€*/

}

a{}控制連接的效果 a:hover{}控制鼠標(biāo)移上去的效果。


css分割線虛線代碼應(yīng)用實(shí)例

實(shí)心的線條:

<hr align=left width=490 color=#990099 SIZE=3 noShade>

實(shí)心線條
豎直線：

<HR align=center width=1 color=red size=100>

豎直線

虛線：

<hr size=1 style="color: blue;border-style:dotted;width:490">


虛線size

雙線：

<hr size=1 style="COLOR:#ff9999;border-style:double;width:490">


雙線



以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)