简洁圆角框(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 >

 

 

 

转载于:https://www.cnblogs.com/jRoger/articles/1810407.html