定义和用法
border-top-right-radius
是 CSS 属性,用于设置元素右上角的圆角效果。
border-top-right-radius
属性可以接受 1 或 2 个值,1 个值:同时设置水平和垂直半径,2 个值:第一个设置水平半径,第二个设置垂直半径(创建椭圆形圆角)
默认值: | 0 |
继承性: | 否 |
可动画性: | 支持。请参阅:可动画属性。 |
版本: | CSS3 |
JavaScript 语法: | object.style.borderTopRightRadius="5px" |
常用的实例
下面通过一些示例,让你更直观地了解 border-top-right-radius
属性的用法:
/* 单个值 - 圆形圆角 */
.example1 {
border-top-right-radius: 10px;
}
/* 两个值 - 椭圆形圆角 */
.example2 {
border-top-right-radius: 20px 10px;
}
/* 百分比值 */
.example3 {
border-top-right-radius: 50%;
}
/* 混合单位 */
.example4 {
border-top-right-radius: 15px 30%;
}
CSS 语法
border-top-right-radius: length | percentage [length | percentage];
属性值
值 | 描述 |
length |
指定圆角的半径长度(如 px, em, rem 等)。 |
percentage |
以百分比指定圆角半径,相对于元素的边框盒尺寸。 |
浏览器支持
表中的数字指定了完全支持border-top-right-radius
属性的第一个浏览器版本。
![]() |
![]() |
![]() |
![]() |
![]() |
Chrome | IE / Edge | Firefox | Safari | Opera |
5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
相关页面
CSS 教程:CSS 边框
CSS 参考手册:CSS border-radius 属性
CSS 参考手册:CSS border-top-left-radius 属性
CSS 参考手册:CSS border-bottom-left-radius 属性
CSS 参考手册:CSS border-bottom-right-radius 属性
评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型,文本属性等,助您快速检索 CSS 使用方法。
87
章节
16
阅读
0
评论
反馈提交成功
感谢您的反馈,我们将尽快处理您的反馈