举报投诉联系我们 手机版 热门标签 名动网
您的位置:名动网 > css3 border-radius CSS3 border-top-right-radius 属性

css3 border-radius CSS3 border-top-right-radius 属性

2023-03-22 12:20 CSS参考手册

css3 border-radius CSS3 border-top-right-radius 属性

css3 border-radius

CSS3 的 border-radius 属性可以让我们轻松地创建圆角效果,它可以用来给元素添加圆角,使其看起来更加美观。

border-radius: 10px;  
border-radius: 5px 10px;  
border-radius: 5px 10px 15px 20px;  

CSS3 border-radius 属性还可以使用百分比来表示,例如:

border-radius: 50%;  

此外,CSS3 还提供了一些高级特性,例如 border-top-left-radius 属性可以单独控制左上方的圆角大小。

CSS3 border-top-right-radius 属性

CSS 参考手册

实例

向 div 元素的右上角添加圆角边框:

div
{
border:2px solid;
border-top-right-radius:2em;
}

亲自试一试

浏览器支持

IE Firefox Chrome Safari Opera

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-top-right-radius 属性。

定义和用法

border-top-right-radius 属性定义右下角边框的形状。

提示:该属性允许您向元素添加圆角边框。

默认值: 0
继承性: no
版本: CSS3
JavaScript 语法: object.style.borderTopRightRadius="5px"

语法

border-top-right-radius: length|% [length|%];

注释:border-top-right-radius 属性的长度值和百分比值定义四分之一椭圆(定义外部边框边缘的边角形状)的半径(radii)。第一个值是水平半径,第二个值是垂直半径。如果省略第二个值,则复制第一个值。如果长度为零,则边角为方形,而不是圆形。水平半径的百分比值参考边框盒的宽度,而垂直半径的百分比值参考边框盒的高度。

描述 测试
length 定义右上角的形状。 测试
% 以百分比值定义右上角的形状。 测试

相关页面

CSS3 教程:CSS3 边框

CSS 参考手册

阅读全文
以上是名动网为你收集整理的css3 border-radius CSS3 border-top-right-radius 属性全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 名动网 mdwl.vip 版权所有 联系我们