CSS border-radius 属性
实例
向 div 元素添加圆角边框：
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px 20px;
}
亲自试一试 »
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px 20px;
}
下面有更多实例。
定义和用法
border-radius 属性定义圆角边框。
提示: 此属性允许您向元素添加圆角！
此属性可以有一到四个值。规则如下：
4 个值 - border-radius: 15px 50px 30px 5px; (第一个值应用于左上角，第二个值应用于右上角，第三个值应用于右下角，第四个值应用于左下角):
3 个值 - border-radius: 15px 50px 30px; (第一个值应用于左上角，第二个值应用于右上角和左下角，第三个值应用于右下角):
2 个值 - border-radius: 15px 50px; (第一个值应用于左上角和右下角，第二个值应用于右上角和左下角):
1 个值 - border-radius: 15px; (该值适用于所有四个角，四个角的圆角相等:
| 默认值: | 0 |
|---|---|
| 继承性: | no |
| 支持动画: | yes. 阅读有关动画的信息 测试一下 |
| 版本: | CSS3 |
| JavaScript 语法: | object.style.borderRadius="25px" 测试一下 |
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
紧跟在 -webkit- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
| 属性 | |||||
|---|---|---|---|---|---|
| border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
语法
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;
}
亲自试一试 »
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;
}
亲自试一试 »
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;
}
亲自试一试 »
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; */
亲自试一试 »
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 属性
