DIV不用图片做可变可到处用的圆角-CFANZ编程社区

DIV不用图片做可变可到处用的圆角
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
2. <html xmlns="http://www.w3.org/1999/xhtml">  
3.  <head>  
4.   <title> 圆角样式 </title>  
5.   <meta name="generator" content="editplus" />  
6.   <meta name="author" content="" />  
7.   <meta name="keywords" content="" />  
8.   <meta name="description" content="" />  
9.   <style type="text/css">  
10. .b1 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #B2D0EA; margin: 0 3px; clear:both;}  
11. .b2 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 2px solid #B2D0EA; border-left: 2px solid #B2D0EA; margin: 0 1px; clear:both;}  
12. .b3 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 1px solid #B2D0EA; border-left: 1px solid #B2D0EA; margin: 0 1px; clear:both;}  
13.   
14. .bc {font-size: 12px; overflow: hidden; display: block; background: #EDF7FF; border-right: 1px solid #B2D0EA; border-left: 1px solid #B2D0EA; margin: 0 0px; clear:both;}  
15. .bt {background: #EDF7FF;margin:0 2px;padding:5px;}  
16. .bb {background: #FFFFFF;margin:0 2px;padding:5px;}  
17.   
18. /** 另一种颜色*/  
19. .bb1{background: #B8E7B3;}/*边框线最外层背景颜色* /  
20. .bb2{background: #E7F9E3;border: #B8E7B3;}/*边框线 的背景和边框线颜色*/  
21. .bb3{background: #E7F9E3;}/*标题背景颜色* /  
22.   </style>  
23.   
24.   
25.  </head>  
26.   
27.  <body>  
28.     
29.   <b class="b1"></b><b class="b2"></b><b class="b3"></b>  
30.   <div class="bc">  
31.     <div class="bt ">标 题</div>  
32.     <div class="bb">  
33.     圆 角三边 这里是内容  
34.     </div>  
35.   </div>  
36.   <b class="b3"></b><b class="b2"></b><b class="b1"></b>  
37. <hr/>  
38.   <b class="b1 bb1"></b><b class="b2 bb2"></b><b class="b3 bb2"></b>  
39.   <div class="bc bb2">  
40.     <div class="bt bb3">另 一种颜色</div>  
41.     <div class="bb">  
42.     另 一种颜色 这里是内容  
43.     </div>  
44.   </div>  
45.   <b class="b3 bb2"></b><b class="b2 bb2"></b><b class="b1 bb1"></b>  
46.   
47.   </body>  
48. </html>
0 条评论