前言：通常情况下，我们使用css3样式中的border-radius实现圆角效果，但是这种方法IE8.0以下版本浏览器是不支持的。 但是目前使用IE8.0的用户还比较多，Windows XP系统最高支持IE8.0，还有些其他的某些Trident内核浏览器也是还停留在IE7.0，所以如果要求比较高的情况下，就要考虑其他办法来实现这个效果。
怎么样实现能兼容性最好的圆角特效呢？
目前有三种方法：
方法一.CSS3实现的圆角效果
参考代码：
<style type="text/css">
#nav {
height:158px;
width:200px;
-moz-border-radius:4px; /*Gecko(Firefox内核)浏览器圆角样式*/
-webkit-border-radius:4px; /*webkit(Chrome内核)浏览器圆角样式*/
border-radius:4px; /*Trident(IE内核)浏览器圆角样式*/
background:#59C3FF;
padding:8px;}
</style> <div id="nav">CSS3实现的圆角效果，IE8.0以下浏览器不支持</div>
优点：使用的时候只需要使用简写方法，给标签指定样式即可；
缺点：IE8.0及以下版本不支持。
方法二.png图片实现的圆角效果
参考代码：
<style type="text/css">
#png_radius {height: 158px;width: 200px;position: relative;border: 1px solid #ccc;padding:8px;}
.radius{width: 8px;height: 8px;background: url(radius.png) no-repeat;position: absolute;}/*显示四个圆角的div的公共样式*/
.radius.left_top{float: left;left: -1px;top: -1px;background-position:0 0;}/*左上角的div的背景样式，left:-1px;top:-1px;为了遮蔽父层的边框*/
.radius.right_top{float: right;right: -1px;top: -1px;background-position:-8px 0;}/*右上角的div的背景样式*/
.radius.left_bottom{float: left;left: -1px;bottom: -1px;background-position:0 -8px;}/*左下角的div的背景样式*/
.radius.right_bottom{float: right;right: -1px;bottom: -1px;background-position:-8px -8px;}/*右下角的div的背景样式*/
</style>
<div id="png_radius">
<!--圆角区-->
<div class="radius left_top"></div>
<div class="radius right_top"></div>
<!--内容区-->
<div style="height: 200px;clear: both;padding: 8px;">
png图片实现的圆角效果，兼容所有支持png图片的浏览器
</div>
<!--圆角区-->
<div class="radius left_bottom"></div>
<div class="radius right_bottom"></div>
</div>
优点：兼容性比较好，只要支持png透明图片的浏览器都支持，目前主流的浏览器都支持；
缺点：需要增加额外的标记进行布局，使用图片，相对于css样式占的资源比较大。
方法三.使用PIE插件，让IE8.0以下浏览器支持CSS3
参考尺码：
<script language="javascript" type="text/javascript">
//引用pic插件
$(function () {
if (window.PIE) {
$('.rounded').each(function () {
PIE.attach(this);
});
}
});
</script>
<style type="text/css">
#nav { height:158px; width:200px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background:#59C3FF;behavior: url(pie.htc);padding:8px;}
</style>
<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