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

 

简洁圆角框(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  阅读(295)  评论(0编辑  收藏  举报

导航