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 |
|---|---|
| 继承 | 否 |
| 可动画 | 是。 了解有关可动画的信息 试一试 |
| 版本 | CSS3 |
| JavaScript 语法 | object.style.borderRadius="25px" 试一试 |
浏览器支持
表中的数字指定完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| border-radius | 5 | 9 | 4 | 5 | 10.5 |
CSS 语法
border-radius: 1-4 长度|% / 1-4 长度|%|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 属性
