DIV+CSS虚线(dotted/dashed)和虚线下划线怎么实现
文章来源：365jz.com 点击数：1426 更新时间：2018-01-07 10:00 参与评论
一、四边为虚线边框
border:1px dashed #000; 黑色虚线边框
实例：
CSS代码： .com365jz{border:1px dashed #000; height:50px;width:350px}Html代码： <div class="com365jz">我的四边为黑色虚线边框</div>
这里设置边框缩写方式定义365jz选择器四边边框为1px的黑色虚线边框
二、左边为虚线：
CSS代码： .com365jz-1{border-left:1px dashed #000; height:50px;width:350px}Html代码： <div class="com365jz-1">我的左边为黑色虚线边框</div>
这里设置了左边一边为黑色虚线边框
三、右边为虚线：
CSS代码： .com365jz-2{border-right:1px dashed #000; height:50px;width:350px}Html代码： <div class="com365jz-2">我的右边为黑色虚线边框</div>
这里设置了右边一边为黑色虚线边框
四、顶部边（上边）为虚线：
CSS代码： .com365jz-3{border-top:1px dashed #000; height:50px;width:350px}Html代码： <div class="com365jz-3">我的上边为黑色虚线边框</div>
这里设置了顶边（上边线）一边为黑色虚线边框
五、底部边（下边）为虚线：
CSS代码： .com365jz-4{border-bottom:1px dashed #000; height:50px;width:350px}Html代码： <div class="com365jz-4">我的下边为黑色虚线边框</div>
这里设置了底边（下边线）一边为黑色虚线边框
六、任意一边不为虚线，其它三边为虚线情况
加入右边边框不为虚线而没有边线，其它三边为黑色虚线边框
CSS代码： .com365jz-5{border:1px dashed #000;border-right:0; height:50px;width:350px}Html代码： <div class="com365jz-5">我的右边边框无边线而其它三边为黑色虚线边框实例</div>
这里通过先设置了该对象四边为黑色1px虚线边框，紧接着又设置一边边线为0的设置，这样相当于设置了3边的边框虚线属性，但是这里注意边框属性设置前后顺序。
以上实例完整DIV+CSS代码如下：
<!DOCTYPE html><html><head><meta charset="gb2312" /><title>CSS 虚线 365jz实例说明<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实例 */</style></head><body>www.com365jz.com css虚线实例实例<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">我的右边边框无边线而其它三边为黑色虚线边框实例</div></body></html>
css虚线样式，应该会想到border的solid，网页布局中solid用的概率最高了，要有css虚线的效果还可以用图片做背，但是不推荐，尽量使用css虚线样式做这个虚线的效果，那么css虚线样式就是border中的dotted和dashed，这两种都是css虚线，但是他们是有区别的。
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>
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
------分隔线----------------------------
