【小窍门】浏览器兼容圆角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在不同内核浏览器下的编写格式：

创新互联建站-专业网站定制、快速模板网站建设、高性价比伊吾网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式伊吾网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖伊吾地区。费用合理售后完善，十余年实体公司更值得信赖。

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前面加上相应的内核前缀，在实际应用中最好加上各种版本内核浏览器前缀。）

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章标题：【小窍门】浏览器兼容圆角Border-radius的问题-创新互联
URL分享：http://mswzjz.cn/article/cocesg.html