| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 1438 人关注过本帖
标题:【小窍门】浏览器兼容圆角Border-radius的问题
只看楼主 加入收藏
elsyyzh
Rank: 1
来 自:湖北黄冈
等 级:新手上路
帖 子:29
专家分:0
注 册:2015-11-9
结帖率:0
收藏
 问题点数:0 回复次数:0 
【小窍门】浏览器兼容圆角Border-radius的问题
圆角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前面加上相应的内核前缀,在实际应用中最好加上各种版本内核浏览器前缀。)
搜索更多相关主题的帖子: Chrome Firefox Google 浏览器 Opera 
2015-11-26 14:34
快速回复:【小窍门】浏览器兼容圆角Border-radius的问题
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.056328 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved