border高级应用（3）---电子表数字

代码：

<style>
.clr{ clear:both;}
.timer { width:367px; height:108px; background:#444444; margin:40px auto; border: solid 13px; border-color:#999 #666 #333 #ccc; text-align:center; }
.timerinfo { margin:0px auto; text-align:center; }
.figure, .fenge, .zhi { width:57px; height:90px; margin:9px; float:left; display:inline;}
.fenge { width:12px; }
.zhi { margin:9px 0px 0px 9px; width:15px; }
.zhi span{ color:#00ff00;}
.figureinfo{ border:#00ff00 solid 12px; width:35px; height:26px;}
.figureinfobot{ border-bottom-width:6px;}
.figureinfotop{border-top-width:6px;}
.figuretop{ border-top-color:#336633;}
.figureright{ border-right-color:#336633;}
.figureleft{ border-left-color:#336633;}
.figurebot{ border-bottom-color:#336633;}
.fengeinfo{ width:12px; height:12px; background:#00ff00; margin-top:22px;}
</style>

<div class="timer">
<div class="timerinfo">
<div class="figure">
<div class="figureinfo figureinfobot figuretop figureleft figurebot"></div>
<div class="figureinfo figureinfotop figuretop figureleft figurebot"></div>
</div>
<div class="figure">
<div class="figureinfo figureinfobot"></div>
<div class="figureinfo figureinfotop figureleft"></div>
</div>
<div class="fenge">
<div class="fengeinfo "></div>
<div class="fengeinfo "></div>
</div>
<div class="figure">
<div class="figureinfo figureinfobot figurebot"></div>
<div class="figureinfo figureinfotop figuretop"></div>
</div>
<div class="figure">
<div class="figureinfo figureinfobot figureleft"></div>
<div class="figureinfo figureinfotop figureright"></div>
</div>
<div class="zhi">
<span>24</div>
</div>
<div class="clr">
</div>
</div>
</div>