MOYUN(/Java/SQL/Linux/DevOps/运维/架构/管理/敏捷/开发)

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
<!DOCTYPE html> 

<html> 

<head> 

<meta charset="gb2312" /> 

<title>CSS 虚线 eeeweb.cn实例说明www.eeeweb.cn</title> 

<style> 

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

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

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

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

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

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

</style> 

</head> 

<body> 

虚线实例实例<br> 

<div class="eeeweb-cn">我四边为虚线边框</div><br> 

<div class="eeeweb-cn-1">我的左边为黑色虚线边框</div><br> 

<div class="eeeweb-cn-2">我的右边为黑色虚线边框</div><br> 

<div class="eeeweb-cn-3">我的上边为黑色虚线边框</div><br> 

<div class="eeeweb-cn-4">我的下边为黑色虚线边框</div><br> 

<div class="eeeweb-cn-5">我的右边边框无边线而其它三边为黑色虚线边框实例</div> 

</body> 

</html> 



//div边框虚线

<DIV style="BORDER-RIGHT: #6f3198 3px dashed; BORDER-TOP: #6f3198 3px dashed; BORDER-LEFT: #6f3198 3px dashed; BORDER-BOTTOM: #6f3198 3px dashed">此处输入文字</DIV>
 
<DIV style="BORDER-RIGHT: #4d6df3 3px dashed; BORDER-TOP: #4d6df3 3px dashed; BORDER-LEFT: #4d6df3 3px dashed; BORDER-BOTTOM: #4d6df3 3px dashed">此处输入文字</DIV>

<DIV style="BORDER-RIGHT: #a8e61d 2px dashed; BORDER-TOP: #a8e61d 2px dashed; BORDER-LEFT: #a8e61d 2px dashed; BORDER-BOTTOM: #a8e61d 2px dashed">此处输入文字</DIV>

<DIV style="BORDER-RIGHT: #ed1c24 2px dashed; BORDER-TOP: #ed1c24 2px dashed; BORDER-LEFT: #ed1c24 2px dashed; BORDER-BOTTOM: #ed1c24 2px dashed">此处输入文字</DIV>

<DIV style="BORDER-RIGHT: #787878 2px dashed; BORDER-TOP: #787878 2px dashed; BORDER-LEFT: #787878 2px dashed; BORDER-BOTTOM: #787878 2px dashed">此处输入文字</DIV>

<DIV style="BORDER-RIGHT: #ffa3b1 2px dashed; BORDER-TOP: #ffa3b1 2px dashed; BORDER-LEFT: #ffa3b1 2px dashed; BORDER-BOTTOM: #ffa3b1 2px dashed">此处输入文字</DIV>
posted on 2012-09-07 16:21  moyun-  阅读(2082)  评论(1编辑  收藏  举报