纸上得来终觉浅，绝知此事要躬行。

 

简洁圆角框(div+css)

 

 1 <!DOCTYPE
 2 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 
 5  <html
 6  xmlns="http://www.w3.org/1999/xhtml">
 7  <head>
 8 <meta http-equiv="Content-Type" content="text/html;
 9 charset=utf-8" />
10 <title>DIV+CSS两个圆角效果</title>
11 
12 <style type="text/css">
13 .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}
14 
15 .b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}
16 .b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid
17 #999;border-right:1px solid #999;}
18 .b1,.b1b{margin:0 5px;background:#999;}
19 .b2,.b2b{margin:0 3px;border-width:2px;}
20 .b3,.b3b{margin:0 2px;}
21 .b4,.b4b{height:2px;margin:0 1px;}
22 .d1{background:#F7F8F9;}
23 #min_height{min-height:300px;}
24 </style>
25 </head>
26 
27 <body>
28     <div>
29         <b class="b1"></b>
30         <b class="b2 d1"></b>
31         <b class="b3 d1"></b>
32         <b class="b4 d1"></b>
33         <div class="b d1" id="min_height">
34             DIV+CSS两个圆角效果,往这个里面放元素可以自由填充
35         </div>
36         <b class="b4b d1"></b>
37         <b class="b3b d1"></b>
38         <b class="b2b d1"></b>
39         <b class="b1b"></b>
40     </div>
41 </body>
42 </html>

 

 

 

posted on 2010-08-27 21:06  JRoger  阅读(294)  评论(0)  编辑  收藏  举报

导航