CSS border-top-left-radius 属性
实例
将圆角边框添加到两个 div 元素的左上角：
#example1 {
border: 2px solid red;
border-top-left-radius: 25px;
}
#example2 {
border: 2px solid red;
border-top-left-radius: 50px 20px;
}
亲自试一试 »
border: 2px solid red;
border-top-left-radius: 25px;
}
#example2 {
border: 2px solid red;
border-top-left-radius: 50px 20px;
}
下面有更多实例。
定义和用法
border-top-left-radius 属性定义左上角的圆角边框。
提示: 此属性允许您向元素添加圆角边框！
| 默认值: | 0 |
|---|---|
| 继承性: | no |
| 支持动画: | yes. 阅读有关动画的信息 测试一下 |
| 版本: | CSS3 |
| JavaScript 语法: | object.style.borderTopLeftRadius="25px" 测试一下 |
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
紧跟在 -webkit- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
| 属性 | |||||
|---|---|---|---|---|---|
| border-top-left-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
语法
border-top-left-radius: length|% [length|%]|initial|inherit;
注释: 如果设置两个值，第一个值用于上边框，第二个值用于左边框。如果省略第二个值，则从第一个值复制该值。如果任一长度为零，则角点为正方形，而不是圆角。
属性值
| 值 | 描述 | 试一试 |
|---|---|---|
| length | 定义左上角的形状。 阅读长度单位 | 亲自试一试 » |
| % | 定义左上角的形状，单位为 % | 亲自试一试 » |
| initial | 将此属性设置为其默认值。请参阅 initial | 亲自试一试 » |
| inherit | 从其父元素继承此属性。请参阅 inherit |
更多实例
实例
将圆角边框添加到左上角（以百分比表示）：
#example1 {
border: 2px solid red;
background: url(paper.gif);
padding: 10px;
border-top-left-radius: 40%;
}
亲自试一试 »
border: 2px solid red;
background: url(paper.gif);
padding: 10px;
border-top-left-radius: 40%;
}
相关页面
CSS 教程: CSS 圆角
HTML DOM 参考手册: borderTopLeftRadius 属性
