CSS border-radius 属性
示例
为两个 <div> 元素添加圆角
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px 20px;
}
自己动手试一试 »
更多“自己尝试”的例子见下文。
定义和用法
border-radius 属性定义了元素角的半径。
提示：此属性允许您为元素添加圆角！
此属性可以具有一个到四个值。规则如下：
四个值 - border-radius: 15px 50px 30px 5px; （第一个值适用于左上角，第二个值适用于右上角，第三个值适用于右下角，第四个值适用于左下角）
三个值 - border-radius: 15px 50px 30px; （第一个值适用于左上角，第二个值适用于右上角和左下角，第三个值适用于右下角）
两个值 - border-radius: 15px 50px; （第一个值适用于左上角和右下角，第二个值适用于右上角和左下角）
一个值 - border-radius: 15px; （该值适用于所有四个角，所有角的圆角半径相等）
| 默认值 | 0 |
|---|---|
| 继承 | no |
| 可动画 | 是。 阅读关于可动画的知识 尝试一下 |
| 版本 | CSS3 |
| JavaScript 语法 | object.style.borderRadius="25px" 尝试一下 |
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| border-radius | 5 | 9 | 4 | 5 | 10.5 |
CSS 语法
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
注意：每个半径的四个值按左上角、右上角、右下角、左下角的顺序给出。如果省略左下角，则它与右上角相同。如果省略右下角，则它与左上角相同。如果省略右上角，则它与左上角相同。
属性值
| 值 | 描述 | 演示 |
|---|---|---|
| length | 定义角的形状。默认值为 0。 阅读关于长度单位的知识 | 演示 ❯ |
| % | 以 % 定义角的形状 | 演示 ❯ |
| initial | 将此属性设置为其默认值。阅读关于initial | |
| inherit | 从其父元素继承此属性。阅读关于inherit |
更多示例
示例
为具有背景颜色的元素设置圆角
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
自己动手试一试 »
示例
为带有边框的元素设置圆角
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
自己动手试一试 »
示例
为带有背景图片的元素设置圆角:
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
自己动手试一试 »
示例
也请注意这个:
#example1 {
border-radius: 2em / 5em;
}
/* 等同于
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */
#example2 {
border-radius: 2em 1em 4em / 0.5em 3em;
}
/* 等同于
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em; */
自己动手试一试 »
相关页面
CSS 教程: CSS 圆角
HTML DOM 参考: borderRadius 属性
