您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > DIV+CSS虛線(dotted/dashed)和虛線下劃線怎么實(shí)現(xiàn)

DIV+CSS虛線(dotted/dashed)和虛線下劃線怎么實(shí)現(xiàn)

文章來(lái)源：365jz.com 點(diǎn)擊數(shù)：1470 更新時(shí)間：2018-01-07 10:00 參與評(píng)論

一、四邊為虛線邊框

border:1px dashed #000; 黑色虛線邊框

實(shí)例：

CSS代碼： .com365jz{border:1px dashed #000; height:50px;width:350px}

Html代碼： <div class="com365jz">我的四邊為黑色虛線邊框</div>

這里設(shè)置邊框縮寫方式定義365jz選擇器四邊邊框?yàn)?px的黑色虛線邊框

二、左邊為虛線：

CSS代碼： .com365jz-1{border-left:1px dashed #000; height:50px;width:350px}

Html代碼： <div class="com365jz-1">我的左邊為黑色虛線邊框</div>

這里設(shè)置了左邊一邊為黑色虛線邊框

三、右邊為虛線：

CSS代碼： .com365jz-2{border-right:1px dashed #000; height:50px;width:350px}

Html代碼： <div class="com365jz-2">我的右邊為黑色虛線邊框</div>

這里設(shè)置了右邊一邊為黑色虛線邊框

四、頂部邊（上邊）為虛線：

CSS代碼： .com365jz-3{border-top:1px dashed #000; height:50px;width:350px}

Html代碼： <div class="com365jz-3">我的上邊為黑色虛線邊框</div>

這里設(shè)置了頂邊（上邊線）一邊為黑色虛線邊框

五、底部邊（下邊）為虛線：

CSS代碼： .com365jz-4{border-bottom:1px dashed #000; height:50px;width:350px}

Html代碼： <div class="com365jz-4">我的下邊為黑色虛線邊框</div>

這里設(shè)置了底邊（下邊線）一邊為黑色虛線邊框

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

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

CSS代碼： .com365jz-5{border:1px dashed #000;border-right:0; height:50px;width:350px}

Html代碼： <div class="com365jz-5">我的右邊邊框無(wú)邊線而其它三邊為黑色虛線邊框?qū)嵗?lt;/div>

這里通過先設(shè)置了該對(duì)象四邊為黑色1px虛線邊框，緊接著又設(shè)置一邊邊線為0的設(shè)置，這樣相當(dāng)于設(shè)置了3邊的邊框虛線屬性，但是這里注意邊框?qū)傩栽O(shè)置前后順序。

以上實(shí)例完整DIV+CSS代碼如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="gb2312" />

<title>CSS 虛線 365jz實(shí)例說(shuō)明<title>www.com365jz.com</title>

<style>

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

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

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

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

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

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

/* www.com365jz.com實(shí)例 */

</style>

</head>

<body>

www.com365jz.com css虛線實(shí)例實(shí)例<br>

<div class="com365jz">我四邊為虛線邊框</div><br>

<div class="com365jz-1">我的左邊為黑色虛線邊框</div><br>

<div class="com365jz-2">我的右邊為黑色虛線邊框</div><br>

<div class="com365jz-3">我的上邊為黑色虛線邊框</div><br>

<div class="com365jz-4">我的下邊為黑色虛線邊框</div><br>

<div class="com365jz-5">我的右邊邊框無(wú)邊線而其它三邊為黑色虛線邊框?qū)嵗?lt;/div>

</body>

</html>

css虛線樣式，應(yīng)該會(huì)想到border的solid，網(wǎng)頁(yè)布局中solid用的概率最高了，要有css虛線的效果還可以用圖片做背，但是不推薦，盡量使用css虛線樣式做這個(gè)虛線的效果，那么css虛線樣式就是border中的dotted和dashed，這兩種都是css虛線，但是他們是有區(qū)別的。

1.dotted虛線

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>dotted虛線</title>
<style type="text/css">
*{
margin:100px;
padding:0;
}
body{
width:1000px;
margin:0 auto;
}
.box{
width:300px;height:50px;
text-align:center;
padding-top:30px;
border:1px dotted #000;
}
</style>
</head>
<body>
<p>大家好，我是dotted虛線！</p>
</body>
</html>

2.dashed虛線

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>dashed虛線</title>
<style type="text/css">
*{
margin:100px;
padding:0;
}
body{
width:1000px;
margin:0 auto;
}
.box{
width:300px;height:50px;
text-align:center;
padding-top:30px;
border:1px dashed #000;
}
</style>
</head>
<body>
<p>大家好，我是dashed虛線！</p>
</body>
</html>