CSS3圆角
随着CSS3 border-radius属性，你可以给任何元素“圆角”。
浏览器支持
在表中的数字规定，完全支持该属性的第一个浏览器版本。
其次是数字-webkit-或-moz-指定用一个前缀工作的第一个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS3 border-radius属性
有了CSS3，你可以给任何元素“圆角”，使用border-radius财产。
这里有三个例子：
1.用于与指定的背景颜色的元素圆角：
圆角！
2.带边框的元素圆角：
圆角！
3.用于与背景图像的元素圆角：
圆角！
下面是代码：
例
#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;
} 试一试»  | 提示： border-radius属性实际上是A速记属性border-top-left-radius ， border-top-right-radius ， border-bottom-right-radius和border-bottom-left-radius属性。 |
|---|
CSS3 border-radius -指定每个角
如果您为仅指定一个值border-radius的财产，这个半径将被应用到所有的4个角。
但是，你可以，如果你想单独指定每个角落。 下面是规则：
- 四个值：第一个值适用于左上角，第二个值适用于右上角，第三个值适用于右下和第四值适用于左下角
- 三个值：第一个值适用于左上角，第二个值适用于右上和左下角，和第三值适用于右下
- 两个值：第一个值适用于左上角和右下角，第二个值适用于右上和左下角
- 一个值：四个角落都同样圆润
这里有三个例子：
1.四值- border-radius: 15px 50px 30px 5px ：
2.三值- border-radius: 15px 50px 30px ：
3.两个值- border-radius: 15px 50px ：
下面是代码：
例
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} 试一试» 您还可以创建椭圆角。
例
#rcorners7 {
border-radius: 50px/15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} 试一试» 自测练习用！
CSS3圆角属性
| 属性 | 描述 |
|---|---|
| border-radius | 简写属性设置所有四个边框 - * - * - 半径属性 |
| border-top-left-radius | 定义了左上角的边界的形状 |
| border-top-right-radius | 定义右上角的边框的形状 |
| border-bottom-right-radius | 定义右下角边框的形状 |
| border-bottom-left-radius | 定义左下角边框的形状 |