兼容多浏览器的html圆角特效

前言：通常情况下，我们使用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