字号: - o +

CSS3的border-radius属性在主流浏览器中的写法

2013-02-20 前端开发 5人评论 14,961次浏览   

子曰:把希望建筑在意欲和心愿上面的人们,二十次中有十九次都会失望 o(∩_∩)o
WopusIDC优惠码:W3Cshare, 点击获取, 或者提交订单时手动输入

前言:有关border-radius属性的语法、取值、说明就不重点讲了,这里主要重点讲一下用法和写法

先简单归纳一下,不管怎样,border-radius属性都遵循top-left(左上)、top-right(右上)、bottom-right(右下)、bottom-left(左下)的顺序,并且都是先Y轴后X轴。

border-radius只有在以下版本的浏览器:Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+支持border-radius标准语法格式,对于老版的浏览器,border-radius需要根据不同的浏览器内核添加不同的前缀,比说Mozilla内核需要加上“-moz”,而Webkit内核需要加上“-webkit”等,那么我们为了能兼容各大内核的老版浏览器,我们看看border-radius在不同内核浏览器下的书写格式:

1、Mozilla(Firefox, Flock等浏览器)

-moz-border-radius-topleft: //左上角
-moz-border-radius-topright: //右上角
-moz-border-radius-bottomright: //右下角
-moz-border-radius-bottomleft: //左下角

等价于:

-moz-border-radius: //简写

2、WebKit (Safari, 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:
-webkit-border-radius:
border-radius:

如果需要拆分开的就等价于下面的代码:

-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属性在各大主流浏览器的写法。

本文作者:两千年的孤寂

2014年的目标:1、入手kp2,多看几本书。2、至少旅游一次。3、带公司走上正轨。少说话,多做事!我不是最好的,但我要做最努力的...... 本站主题交流群:465295619,不闲聊!以后你会知道它的重要性!你懂的~

继续查看有关 的文章

本文密切相关的文章

网友评论3条 ,博主回复2

  1. -moz-border-radius:
    -webkit-border-radius:
    border-radius:
    我一般这么写 方便

    所谓刚子02-20 16:50 回复
  2. 博主绝对技术流 前来学习

    东森平台02-20 16:30 回复
  3. 我一般这么写: -webkit-border-radius: 5px 5px 0 0;

    牧风 02-20 11:35 回复

发表我的评论

*

*

取消