前言：通常情况下，我们使用css3样式中的border-radius实现圆角效果，但是这种方法IE8.0以下版本浏览器是不支持的。 但是目前使用IE8.0的用户还比较多，Windows XP系统最高支持IE8.0，还有些其他的某些Trident内核浏览器也是还停留在IE7.0，所以如果要求比较高的情况下，就要考虑其他办法来实现这个效果。
怎么样实现能兼容性最好的圆角特效呢？
目前有三种方法：
方法一.CSS3实现的圆角效果
参考代码：
1 <style type="text/css"> 2 #nav { 3 height:158px; 4 width:200px; 5 -moz-border-radius:4px; /*Gecko(Firefox内核)浏览器圆角样式*/ 6 -webkit-border-radius:4px; /*webkit(Chrome内核)浏览器圆角样式*/ 7 border-radius:4px; /*Trident(IE内核)浏览器圆角样式*/ 8 background:#59C3FF; 9 padding:8px;} 10 </style> 11 12 <div id="nav">CSS3实现的圆角效果，IE8.0以下浏览器不支持</div>
优点：使用的时候只需要使用简写方法，给标签指定样式即可；
缺点：IE8.0及以下版本不支持。
方法二.png图片实现的圆角效果
参考代码：
1 <style type="text/css"> 2 #png_radius {height: 158px;width: 200px;position: relative;border: 1px solid #ccc;padding:8px;} 3 .radius{width: 8px;height: 8px;background: url(radius.png) no-repeat;position: absolute;}/*显示四个圆角的div的公共样式*/ 4 .radius.left_top{float: left;left: -1px;top: -1px;background-position:0 0;}/*左上角的div的背景样式，left:-1px;top:-1px;为了遮蔽父层的边框*/ 5 .radius.right_top{float: right;right: -1px;top: -1px;background-position:-8px 0;}/*右上角的div的背景样式*/ 6 .radius.left_bottom{float: left;left: -1px;bottom: -1px;background-position:0 -8px;}/*左下角的div的背景样式*/ 7 .radius.right_bottom{float: right;right: -1px;bottom: -1px;background-position:-8px -8px;}/*右下角的div的背景样式*/ 8 </style> 9 <div id="png_radius"> 10 <!--圆角区--> 11 <div class="radius left_top"></div> 12 <div class="radius right_top"></div> 13 <!--内容区--> 14 <div style="height: 200px;clear: both;padding: 8px;"> 15 png图片实现的圆角效果，兼容所有支持png图片的浏览器 16 </div> 17 <!--圆角区--> 18 <div class="radius left_bottom"></div> 19 <div class="radius right_bottom"></div> 20 </div>
优点：兼容性比较好，只要支持png透明图片的浏览器都支持，目前主流的浏览器都支持；
缺点：需要增加额外的标记进行布局，使用图片，相对于css样式占的资源比较大。
方法三.使用PIE插件，让IE8.0以下浏览器支持CSS3
参考尺码：
1 <script language="javascript" type="text/javascript"> 2 //引用pic插件 3 $(function () { 4 if (window.PIE) { 5 $(‘.rounded‘).each(function () { 6 PIE.attach(this); 7 }); 8 } 9 }); 10 </script> 11 <style type="text/css"> 12 #nav { height:158px; width:200px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background:#59C3FF;behavior: url(pie.htc);padding:8px;} 13 </style> 14 <div id="nav">圆角效果，兼容Trident(IE内核),Gecko(Firefox内核),Webkit(Google Chrome内核)等多种内核浏览器</div>
优点：兼容性比较好，解决IE8.0以下版本不支持CSS3的问题；
缺点：需要引用pic.htc，这个文件有40KB大小，占用的资源空间比较大。
总结:
以上三种方法，各有优点和缺点，可以根据不同的需要和情况选择合适的方法。 1.
纯CSS3方法：如果对圆角的要求不太严格，只求大部分主流浏览器支持，不考虑ie8.0及以下版本的情况下，直接用纯CSS3实现是最简单的。
2.
使用Png图片：如果想让所有的浏览器都支持，但是又不想占用太多资源，那么，使用png透明图片就是最好的选择了。
3.
使用pie插件：如果想让所有的浏览器都支持，但是又不想根据不同圆角需求制作不同的png圆角图片，不想添加多余的标签，忽略插件的大小，那么可以选择这种方式。
实例下载：http://download.csdn.net/detail/xyytcs/7037227
欢迎转载，转载请注明出处：http://www.cnblogs.com/xyyt/p/3599505.html