兼容多浏览器的html圆角特效
前言:通常情况下,我们使用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