代码改变世界

css实现圆角

2010-11-16 16:01  yuejianjun  阅读(218)  评论(0)    收藏  举报
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
        <style type ="text/css" > 
 /*corner    css实现圆角 部分*/ 
.corner { margin-left:10px;margin-right:10px;width :302px;}  
.corner_block { border-left: 1px solid #D8DFEA; border-right: 1px solid #D8DFEA;height:65px; width :300px;}  
.h_r_1 { height: 1px; font-size: 0; line-height: 0; border-left: 2px solid #D8DFEA; border-right: 1px solid #D8DFEA; }
.h_r_2 { height: 1px; font-size: 0; line-height: 0; border-left: 2px solid #D8DFEA; border-right: 1px solid #D8DFEA; margin: 0 1px; }
.h_r_3 { margin: 0 1px; height: 0px; font-size: 0; line-height: 0; border-bottom: 1px solid #D8DFEA; } 
.r_l_1 { height: 1px; font-size: 0; line-height: 0; border-left: 2px solid #CCC; border-right: 1px solid #CCC; }
.r_l_2 { height: 1px; font-size: 0; line-height: 0; border-left: 2px solid #CCC; border-right: 1px solid #CCC; margin: 0 1px; }
.r_l_3 { margin: 0 2px; height: 0px; font-size: 0; line-height: 0; border-bottom: 1px solid #CCC; } 
/*corner 部分结束*/
    </style>
</head>
<body> 
      
       <div class="corner">  
       <p class="h_r_3"></p><p class="h_r_2"></p><p class="h_r_1"></p> 
       <div class="corner_block"> 
               <div style=" padding  :10px;"> css实现圆角 部分 </div>
       </div> 
        <p class="h_r_1"></p><p class="h_r_2"></p><p class="h_r_3"></p>        
    </div>
</body>
</html>