本节向大家介绍一下DIV+CSS圆角的简单实现方法，即使用图片做背景的DIV+CSS圆角实现方案。一张图片利用CSS定位，实现DIV的四个边角都是圆角。这样的好处是，只需要一张圆形的图片，就可以实现四个圆角了。
DIV+CSS圆角的简单实现方法
做网站设计的时候，免不了和DIV+CSS打交道，而DIV+CSS圆角则是网站设计必经的一课。比较了网络上众多的DIV+CSS圆角实现的方案，包括不用图片纯CSS实现圆角的许多方案，结果是不用图片的DIV+CSS圆角无一例外，都使用了大量的冗余无意义的css代码，而且在IE、Firefox、chrome等多浏览器下的兼容性不容乐观。
总结一下，建议大家还是使用图片做背景的DIV+CSS圆角实现方案。一张图片利用CSS定位，实现DIV的四个边角都是圆角。这样的好处是，只需要一张圆形的图片，就可以实现四个圆角了。
HTML代码：
复制
<divclassdivclass="nav"> <divclassdivclass="nav2"> <SPANclassSPANclass=leftTop></SPAN> <SPANclassSPANclass=rightTop></SPAN>
1.
2.
3.
4.
5.
这里是主体内容....
复制
<SPANclassSPANclass=leftBottom></SPAN> <SPANclassSPANclass=rightBottom></SPAN> </div> </div>
1.
2.
3.
4.
CSS代码：
复制
.nav{ position:relative; width:500px; margin:0pxauto; background:#eeeeee; } .nav2{ border:1pxsolid#dddddd; padding:4px0px2px0px; height:42px; text-align:center; } /*DIV+CSS圆角处理*/ .nav.leftTop{/*DIV+CSS圆角左上角*/ background:url(images/wbb.gif)no-repeatlefttop; width:10px; height:10px; position:absolute; left:0; top:0; } .nav.rightTop{/*DIV+CSS圆角右上角*/ background:url(images/wbb.gif)no-repeatrighttop; width:10px; height:10px; position:absolute; right:0; top:0; } .nav.leftBottom{/*DIV+CSS圆角左下角*/ background:url(images/wbb.gif)no-repeatleftbottom; width:10px; height:10px; position:absolute; left:0; bottom:0; } .nav.rightBottom{/*DIV+CSS圆角右下角*/ background:url(images/wbb.gif)no-repeatrightbottom; width:10px; height:10px; position:absolute; right:0; bottom:0; } /*DIV+CSS圆角处理end*/
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
【编辑推荐】