建站
咨詢
售后
建站咨詢
新聞中心
很多 CSS 初學(xué)者在前端開發(fā)過程中，經(jīng)常會用到 CSS 虛線樣式，但是不知道 CSS 虛線樣式該如何實(shí)現(xiàn)，比如一個 CSS 這樣寫：?border-style:dotted solid double dashed; ?出來的框就是：上邊框是點(diǎn)狀，右邊框是實(shí)線，下邊框是雙線，左邊框是虛線，如果一個 CSS 這樣寫：border-bottom:1px dashed #000000;出來的框就是一條寬度為1像素的黑色下劃虛線··· CSS 關(guān)于“線”的類型還真是挺多的，其中新手們比較關(guān)注的還是“虛線的實(shí)現(xiàn)方法”。
創(chuàng)新互聯(lián)是一家網(wǎng)站設(shè)計制作、做網(wǎng)站，提供網(wǎng)頁設(shè)計，網(wǎng)站設(shè)計，網(wǎng)站制作，建網(wǎng)站，按需網(wǎng)站策劃，網(wǎng)站開發(fā)公司，自2013年創(chuàng)立以來是互聯(lián)行業(yè)建設(shè)者，服務(wù)者。以提升客戶品牌價值為核心業(yè)務(wù)，全程參與項(xiàng)目的網(wǎng)站策劃設(shè)計制作，前端開發(fā)，后臺程序制作以及后期項(xiàng)目運(yùn)營并提出專業(yè)建議和思路。
css虛線實(shí)現(xiàn)方法
定義和用法：
border-style 屬性用于設(shè)置元素所有邊框的樣式，或者單獨(dú)地為各邊設(shè)置邊框樣式。只有當(dāng)這個值不是 ?
none? 時邊框才可能出現(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}
嘗試一下 ? 這里配置邊框縮寫形式解釋 ?
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、隨意一邊不為虛線，其它三邊為虛線狀況
參與右邊邊框不為虛線而沒有邊線，其它三邊為黑色虛線邊框
實(shí)例
.hackhome{ border:1px dashed #000;border-right:0; height:50px;width:350px; }
嘗試一下 ? 這里先配置了該對象四邊為黑色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 個邊框都是點(diǎn)狀
怎么用CSS實(shí)現(xiàn)鏈接的虛線下劃線效果
修改您的樣式表，找下邊這段（一般都在開頭）
a {
color:#3399FF;
font-weight:Normal; /*字體效果 普通 可以改成bold粗體*/
text-decoration:none; /*下劃線效果：無下劃線*/
}
a:hover {
color:#4499EE;
text-decoration:none; /*下劃線效果：無下劃線*/
border-bottom: 1px #0099CC dotted /*加一個只有下邊的框 邊框?yàn)樘摼€*/
}
a{}控制連接的效果 a:hover{}控制鼠標(biāo)移上去的效果。
css分割線虛線代碼應(yīng)用實(shí)例
實(shí)心的線條:
豎直線：
虛線：
雙線：
網(wǎng)頁題目：創(chuàng)新互聯(lián)CSS教程：CSS虛線實(shí)現(xiàn)方法及多種應(yīng)用實(shí)例
路徑分享：http://www.dlmjj.cn/article/cdccgci.html
