99re热视频这里只精品,久久久天堂国产精品女人,国产av一区二区三区,久久久精品成人免费看片,99久久精品免费看国产一区二区三区

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

2020-11-16 11:17 更新

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


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

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

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

1、四邊為虛線(xiàn)邊框
?border:1px dashed #000;? 黑色虛線(xiàn)邊框

實(shí)例：


實(shí)例

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


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

2、左邊為虛線(xiàn)：

實(shí)例

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


嘗試一下 ?
這里配置了左邊一邊為黑色虛線(xiàn)邊框

3、右邊為虛線(xiàn)：

實(shí)例

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


嘗試一下 ?
這里配置了右邊一邊為黑色虛線(xiàn)邊框

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

實(shí)例

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


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

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

實(shí)例

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


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

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

實(shí)例

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

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

常用css虛線(xiàn)樣式

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

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

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

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

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

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

a {

color:#3399FF;

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

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

}

a:hover {

color:#4499EE;

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

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

}

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


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

實(shí)心的線(xiàn)條:

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

實(shí)心線(xiàn)條
豎直線(xiàn)：

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

豎直線(xiàn)

虛線(xiàn)：

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


虛線(xiàn)size

雙線(xiàn)：

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


雙線(xiàn)



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

掃描二維碼

下載編程獅App

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

編程獅公眾號(hào)