首页 >> 技术文章 >> 详细内容
CSS3 border-radius 属性详解与用法

实例

向 div 元素添加圆角边框:

div
{
border:2px solid;
border-radius:25px;
}

亲自试一试

页面底部有更多实例。

浏览器支持

IEFirefoxChromeSafariOpera

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。

定义和用法

border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。

提示:该属性允许您为元素添加圆角边框!

默认值:0
继承性:no
版本:CSS3
JavaScript 语法:object.style.borderRadius="5px"

语法

border-radius: 1-4 length|% / 1-4 length|%;

注释:按此顺序设置每个 radii 的四个值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。

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: none | <length>{1,4} [/ <length>{1,4} ]?
-webkit-border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
border-radius: none | <length>{1,4} [/ <length>{1,4} ]?

其拆分开来的格式相应需要加上-moz和-webkit,上面的代码其实就等价于下面的代码:

复制代码
代码如下:

-moz-border-radius-topleft: <length> <length> //左上角 
-moz-border-radius-topright: <length> <length> //右上角 
-moz-border-radius-bottomright: <length> <length> //右下角 
-moz-border-radius-bottomleft: <length> <length> //左下角 
-webkit-border-top-left-radius: <length> <length> //左上角 
-webkit-border-top-right-radius: <length> <length> //右上角 
-webkit-border-bottom-right-radius: <length> <length> //右下角 
-webkit-border-bottom-left-radius: <length> <length> // 左下角 
border-top-left-radius: <length> <length> //左上角 
border-top-right-radius: <length> <length> //右上角 
border-bottom-right-radius: <length> <length> //右下角 
border-bottom-left-radius: <length> <length> //左下角 


另外需要特别注意的是,border-radius一定要放置在-moz-border-radius和-webkit-border-radius后面。

南京服务器托管 | 南京服务器租用 | 南京主机托管 | 南京主机租用 | 南京华昊数据 | www.467.cn |
TEL:400-025-9-467  025-58633651 QQ:23190019

发布者:admin 发布时间:2015-8-12 阅读:1455

Baidu
Copyright © 2002-2020 467.Cn All rights reserved    南京华昊网络技术有限公司    版权所有
备案序号:苏ICP备13052121号    ISP经营许可证:苏B2-20080166    ICP/SP经营许可证:苏B2-20130350      苏公网安备 32011102010099号
地址:南京市江北新区大桥北路77号电信大楼5楼    电话:025-58633651(8线)  13913852884  传真:025-58497310    E-mail:467cn@163.com    邮编:210032
网址:Www.467.Cn    QQ在线支持:点击这里给我发消息 点击这里给我发消息