【小窍门】浏览器兼容圆角Border-radius的问题
2015-11-26 14:39
489 查看
圆角css代码:border-radius只有在以下版本的浏览器:Firefox4.0+、Google Chrome 10.0+、Opera 10.5+、IE9+支持border-radius标准语法格式,对于老版的浏览器,border-radius需要根据不同的浏览器内核添加不同的前缀,比说Mozilla内核需要加上“-moz”,而Webkit内核需要加上“-webkit”等,那么为了能兼容各大内核的老版浏览器,我们看看border-radius在不同内核浏览器下的编写格式:
1、Mozilla(Firefox等浏览器) -moz-border-radius-topleft: //左上角 -moz-border-radius-topright: //右上角 -moz-border-radius-bottomright: //右下角 -moz-border-radius-bottomleft: //左下角 等同于: -moz-border-radius: //简写
2、WebKit ( Chrome等浏览器) -webkit-border-top-left-radius: //左上角 -webkit-border-top-right-radius: //右上角 -webkit-border-bottom-right-radius: //右下角 -webkit-border-bottom-left-radius: // 左下角 等同于: -webkit-border-radius: //简写
3、Opera浏览器: border-top-left-radius: //左上角 border-top-right-radius: //右上角 border-bottom-right-radius: //右下角 border-bottom-left-radius: //左下角 等同于: border-radius: //简写
4、Trident (IE)IE<9不支持border-radius;IE9下没有私有格式,都是用border-radius,其写法和Opera是一样的。不管是新版还是老版的各种内核浏览器都能支持border-radius属性,那么我们在具体应用中时需要把我们的border-radius格式改成: -moz-border-radius: none | {1,4} [/ {1,4} ]? -webkit-border-radius: none | {1,4} [/ {1,4} ]? border-radius: none | {1,4} [/ {1,4} ]?其拆分开来的格式需要加上-moz和-webkit,上面的代码就等价于下面的代码: -moz-border-radius-topleft: //左上角 -moz-border-radius-topright: //右上角 -moz-border-radius-bottomright: //右下角 -moz-border-radius-bottomleft: //左下角 -webkit-border-top-left-radius: //左上角 -webkit-border-top-right-radius: //右上角 -webkit-border-bottom-right-radius: //右下角 -webkit-border-bottom-left-radius: // 左下角 border-top-left-radius: //左上角 border-top-right-radius: //右上角 border-bottom-right-radius: //右下角 border-bottom-left-radius: //左下角注:border-radius一定要放置在-moz-border-radius和-webkit-border-radius后面,(特别声明:本文中所讲实例都只写了标准语法格式,如果你的版本不是上面所提到的几个版本,如要正常显示效果,请更新浏览器版本,或者在border-radius前面加上相应的内核前缀,在实际应用中最好加上各种版本内核浏览器前缀。)
1、Mozilla(Firefox等浏览器) -moz-border-radius-topleft: //左上角 -moz-border-radius-topright: //右上角 -moz-border-radius-bottomright: //右下角 -moz-border-radius-bottomleft: //左下角 等同于: -moz-border-radius: //简写
2、WebKit ( Chrome等浏览器) -webkit-border-top-left-radius: //左上角 -webkit-border-top-right-radius: //右上角 -webkit-border-bottom-right-radius: //右下角 -webkit-border-bottom-left-radius: // 左下角 等同于: -webkit-border-radius: //简写
3、Opera浏览器: border-top-left-radius: //左上角 border-top-right-radius: //右上角 border-bottom-right-radius: //右下角 border-bottom-left-radius: //左下角 等同于: border-radius: //简写
4、Trident (IE)IE<9不支持border-radius;IE9下没有私有格式,都是用border-radius,其写法和Opera是一样的。不管是新版还是老版的各种内核浏览器都能支持border-radius属性,那么我们在具体应用中时需要把我们的border-radius格式改成: -moz-border-radius: none | {1,4} [/ {1,4} ]? -webkit-border-radius: none | {1,4} [/ {1,4} ]? border-radius: none | {1,4} [/ {1,4} ]?其拆分开来的格式需要加上-moz和-webkit,上面的代码就等价于下面的代码: -moz-border-radius-topleft: //左上角 -moz-border-radius-topright: //右上角 -moz-border-radius-bottomright: //右下角 -moz-border-radius-bottomleft: //左下角 -webkit-border-top-left-radius: //左上角 -webkit-border-top-right-radius: //右上角 -webkit-border-bottom-right-radius: //右下角 -webkit-border-bottom-left-radius: // 左下角 border-top-left-radius: //左上角 border-top-right-radius: //右上角 border-bottom-right-radius: //右下角 border-bottom-left-radius: //左下角注:border-radius一定要放置在-moz-border-radius和-webkit-border-radius后面,(特别声明:本文中所讲实例都只写了标准语法格式,如果你的版本不是上面所提到的几个版本,如要正常显示效果,请更新浏览器版本,或者在border-radius前面加上相应的内核前缀,在实际应用中最好加上各种版本内核浏览器前缀。)
相关文章推荐
- 国内外编译原理课程实践教学现状分析
- CodeForcesGym 100735D Triangle Formation
- Java Eclipse部分图标汇总
- 初学Jquery EasyUI需要注意的问题
- 长图片制作
- UITabBar的隐藏
- C#写好的类库dll怎么在别人调用的时候也能看到注释?
- 使用Android Studio调试内存问题
- asp.net web开发中使用JS百度地图信息弹出窗中显示echarts图
- 快速设置XMind首选项
- 51单片机串口波特率那些事
- boundingRectWithSize 方法的使用
- UML类图几种关系的总结
- C++primer plus第六版课后编程练习答案5.1
- oracle 定时运行存储调度 schedule job,传递参数 及相关
- 调皮的JavaScript
- hive入门
- 突破限制爬取网页数据 googlesholar为例【转】
- NodeJS中使用async控制并发-@CAOLAN
- 高合成数(反素数)