CSS3 `border-radius` 属性

说明

a1 CSS 属性设置元素边框角的圆角。它是 border-top-left-radius, border-top-right-radius, border-bottom-right-radius, 和 border-bottom-left-radius 属性的简写属性。

下表总结了此属性的使用上下文和版本历史记录。

默认值：	`0`
适用于：	所有元素
继承：	No
动画：	Yes. 参见动画属性。
版本：	New in CSS3

注意： border-radius 属性也会使元素的背景变圆，即使没有定义边框或将其值设置为 none .

语法

属性的语法如下：

border-radius:

[ length | percentage ] ^{1 to 4 values} 
 \-------------------------------/
            First radii
/ [length | percentage ] ^{1 to 4 values} | initial | inherit
   \------------------------------/
        Second radii (optional)

这种速记符号可以采用一个、两个、三个或四个空格分隔的值。

如果指定一个值，则定义所有角的半径。
如果指定两个值，则第一个值用于左上角和右下角，而第二个值用于右上角和左下角。
如果指定三个值，则第一个值用于左上角，第二个值用于右上角和左下角，第三个值用于右下角。
如果指定四个值，则每个值按左上角、右上角、右下角和左下角的顺序分别应用于边框。

下面的示例显示了 border-radius 属性的作用。

示例

Try this code »

div {
    border: 2px solid #f08080;
    border-radius: 20px;
}

注意：可选的第二个长度值，前面有一个"/"，定义角的垂直半径，因此角的形状是四分之一椭圆。如果第二个长度被省略，或者等于第一个 — 角的形状是四分之一圆。如果任一长度为零，则角是方形的，而不是圆形的。

属性值

下表描述了该属性的值。

值	说明
length	`px`, `pt`, `cm`, `em` 中的长度值等。不允许为负值。
percentage	半径的大小百分比。在椭圆角的情况下，水平半径的百分比是相对于元素框的宽度计算的，而垂直半径的百分比是相对于元素框的高度计算的。不允许使用负值。
`initial`	将此属性设置为其默认值。
`inherit`	如果指定，则关联元素采用其父元素 `border-radius` 属性的计算值。

浏览器兼容性

所有主要的现代浏览器都支持 border-radius 属性。

基本支持—

Firefox 4+
Google Chrome 4+
Internet Explorer 9+
Apple Safari 5+
Opera 10.5+

进一步阅读

请参阅以下教程： CSS 边框, CSS3 边框.

CSS3 border-radius 属性

说明

语法

示例

属性值

浏览器兼容性

基本支持—

进一步阅读

关于我们

联系方式

互动工具

CSS3 `border-radius` 属性