用CSS制作的圆角层

 1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
 2 < html >
 3 < head >
 4 < title > Nifty Corners: HTML CSS rounded corners </ title >
 5 < meta  http-equiv ="content-type"  content ="text/html; charset=iso-8859-1" >
 6 < meta  name ="generator"  content ="HAPedit 3.1" >
 7 < style  type ="text/css" >
 8body{}{padding: 20px;background-color: #FFF;
 9font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}
10h1,h2,p{}{margin: 0 10px}
11h1{}{font-size: 250%;color: #FFF}
12h2{}{font-size: 200%;color: #f0f0f0}
13p{}{padding-bottom:1em}
14h2{}{padding-top: 0.3em}
15div#nifty{}{ margin: 0 10%;background: #9BD1FA}
16
17b.rtop, b.rbottom{}{display:block;background: #FFF}
18b.rtop b, b.rbottom b{}{display:block;height: 1px;
19overflow: hidden; background: #9BD1FA}
20b.r1{}{margin: 0 5px}
21b.r2{}{margin: 0 3px}
22b.r3{}{margin: 0 2px}
23b.rtop b.r4, b.rbottom b.r4{}{margin: 0 1px;height: 2px}
24 </ style >
25 </ head >
26 < body >
27 < div  id ="nifty" >
28 < b  class ="rtop" >< b  class ="r1" ></ b >< b  class ="r2" ></ b >< b  class ="r3" ></ b >< b  class ="r4" ></ b ></ b >
29 < h1 > HEADER </ h1 >
30 < p > CONTENT - 1 </ p >
31 < h2 > HEADER </ h2 >
32 < p > CONTENT - 2. </ p >
33 < b  class ="rbottom" >< b  class ="r4" ></ b >< b  class ="r3" ></ b >< b  class ="r2" ></ b >< b  class ="r1" ></ b ></ b >
34 </ div >
35 </ body >
36 </ html >
37

转载于:https://www.cnblogs.com/cnaspnet/archive/2006/05/30/412659.html