CSS3
border-radius
属性
云搜索MX教程(yssmx.com)
实例
给两个 div 元素添加圆角的边框：
#example1
{
border:
2
px
solid
red
;
border-radius:
25
px
;
}
#example2
{
border:
2
px
solid
red
;
border-radius:
50
px
20
px
;
}
尝试一下 »
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
|
属性
|
|
|
|
|
|
|
border-radius
|
4.0 -webkit-
|
9.0
|
4.0 -moz-
|
5.0 -webkit-
|
10.5 -o-
|
属性定义及使用说明
border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。
border-radius 属性是一个最多可指定四个
border-*-radius
属性的复合属性
提示：
这个属性允许你为元素添加圆角边框！
|
默认值:
|
|
|
继承:
|
no
|
|
版本:
|
CSS3
|
|
JavaScript 语法:
|
object
object.style.borderRadius="5px"
|
语法
border-radius:
1-4 length
|
%
/
1-4 length
|
%
;
注意:
每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
|
值
|
描述
|
|
length
|
定义弯道的形状。
|
|
%
|
使用%定义角落的形状。
|
border-radius
:
1em
/
5em
;
/* 等价于： */
border-top-left-radius
:
1em
5em
;
border-top-right-radius
:
1em
5em
;
border-bottom-right-radius
:
1em
5em
;
border-bottom-left-radius
:
1em
5em
;
border-radius
:
4px
3px
6px
/
2px
4px
;
/* 等价于： */
border-top-left-radius
:
4px
2px
;
border-top-right-radius
:
3px
4px
;
border-bottom-right-radius
:
6px
2px
;
border-bottom-left-radius
:
3px
4px
;
椭圆边框 -
border-radius: 15px 50px 30px 5px
：第一个值适用于左上角，第二个值适用于右上角，第三个值适用于右下角，第四个值适用于左下角：
椭圆边框 -
border-radius: 15px 50px 30px
：第一个值适用于左上角，第二个值适用于右上角和左下角，第三个值适用于右下角：
椭圆边框 -
border-radius: 15px 50px
：第一个值适用于左上角和右下角，第二个值适用于右上角和左下角
椭圆边框 -
border-radius: 15px
：该值适用于所有四个角，均等圆角
尝试一下 »
更多实例
实例
背景图带边框：
#rcorners3
{
border-radius:
25
px
;
background:
url
(
paper
.
gif
)
;
background-position:
left
top
;
background-repeat:
repeat
;
padding:
20
px
;
width:
200
px
;
height:
150
px
;
}
尝试一下 »
实例
不同类型参数：
#rcorners7
{
border-radius:
50
px
/
15
px
;
background:
#8AC007
;
padding:
20
px
;
width:
200
px
;
height:
150
px
;
}
#rcorners8
{
border-radius:
15
px
/
50
px
;
background:
#8AC007
;
padding:
20
px
;
width:
200
px
;
height:
150
px
;
}
#rcorners9
{
border-radius:
50
%
;
background:
#8AC007
;
padding:
20
px
;
width:
200
px
;
height:
150
px
;
}
尝试一下 »
实例
不同参数个数：
#rcorners4
{
border-radius:
15
px
50
px
30
px
5
px
;
padding:
20
px
;
width:
200
px
;
height:
150
px
;
}
#rcorners5
{
border-radius:
15
px
50
px
30
px
;
padding:
20
px
;
width:
200
px
;
height:
150
px
;
}
#rcorners6
{
border-radius:
15
px
50
px
;
padding:
20
px
;
width:
200
px
;
height:
150
px
;
}
#rcorners7
{
border-radius:
15
px
;
padding:
20
px
;
width:
200
px
;
height:
150
px
;
}
尝试一下 »
实例
简写格式：
#example1
{
border-radius:
2
em
/
5
em
;
}
#example2
{
border-radius:
2
em
1
em
4
em
/
0.5
em
3
em
;
}
尝试一下 »
相关文章
CSS3 教程:
CSS3 边框
