您现在的位置: 365建站网 > 365学习 > DIV+CSS虚线(dotted/dashed)和虚线下划线怎么实现

DIV+CSS虚线(dotted/dashed)和虚线下划线怎么实现

文章来源:365jz.com     点击数:360    更新时间: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>
 

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (360人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------