CSS 圆角
CSS 圆角
使用 CSS border-radius 属性，您可以赋予任何元素“圆角”。
CSS border-radius 属性
CSS border-radius 属性定义元素角的半径。
提示： 此属性允许您为元素添加圆角！
以下举三个例子：
1. 具有指定背景颜色的元素的圆角：
圆角！
2. 带边框元素的圆角：
圆角！
3. 带有背景图像的元素的圆角：
圆角！
以下是代码：
例子
#rcorners1 {
边框半径：25px；
背景：#73AD21；
填充：20px；
宽度：200px；
高度：150px；
}
#rcorners2 {
边框半径：25px；
边框：2px 实线#73AD21；
填充：20px；
宽度：200px；
高度：150px；
}
#rcorners3 {
边框半径：25px；
背景：url（paper.gif）；
背景位置：左上角；
背景重复：重复；
填充：20px；
宽度：200px；
高度：150px；
}
亲自尝试 »
提示： 这border-radius 属性实际上是border-top-left-radius, border-top-right-radius, border-bottom-right-radius 和border-bottom-left-radius 特性。
CSS 边框半径 - 指定每个角
这 border-radius 属性可以具有 1 到 4 个值。规则如下：
四个值 - border-radius: 15px 50px 30px 5px; （第一个值适用于左上角，第二个值适用于右上角，第三个值适用于右下角，第四个值适用于左下角）：
三个值——border-radius: 15px 50px 30px; （第一个值适用于左上角，第二个值适用于右上角和左下角，第三个值适用于右下角）：
两个值 - border-radius: 15px 50px; （第一个值适用于左上角和右下角，第二个值适用于右上角和左下角）：
一个值-border-radius:15px; （该值适用于四个角，它们的圆度相同：
以下是代码：
例子
#rcorners1 {
边框半径：15px 50px 30px 5px；
背景：#73AD21；
填充：20px；
宽度：200px；
高度：150px；
}
#rcorners2 {
边框半径：15px 50px 30px；
背景：#73AD21；
填充：20px；
宽度：200px；
高度：150px；
}
#rcorners3 {
边框半径：15px 50px；
背景：#73AD21；
填充：20px；
宽度：200px；
高度：150px；
}
#rcorners4 {
边框半径：15px；
背景：#73AD21；
填充：20px；
宽度：200px；
高度：150px；
}
亲自尝试 »
您还可以创建椭圆形角：
例子
#rcorners1 {
边框半径：50px / 15px；
背景：#73AD21；
填充：20px；
宽度：200px；
高度：150px；
}
#rcorners2 {
边框半径：15px / 50px；
背景：#73AD21；
填充：20px；
宽度：200px；
高度：150px；
}
#rcorners3 {
边框半径：50%；
背景：#73AD21；
填充：20px；
宽度：200px；
高度：150px；
}
亲自尝试 »
CSS 圆角属性
| 财产 | 描述 |
|---|---|
| 边框半径 | 用于设置所有四个 border-*-*-radius 属性的简写属性 |
| 边框左上角半径 | 定义左上角边框的形状 |
| 边框右上半径 | 定义右上角边框的形状 |
| 边框右下角半径 | 定义右下角边框的形状 |
| 边框左下角半径 | 定义左下角边框的形状 |
