We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

这篇翻译不完整。请帮忙从英语翻译这篇文章

概要

border-top-right-radius属性设置元素的右上角弧形,这个圆弧可能是一个椭圆,或者其中一个值是0的话,就是没有圆弧,换句话就是说拐角是方形的。

border-top-right-radius.png

一个背景通常以一张图片或者颜色开始,在边框处被剪切,更甚至就是一个圆形;剪切的额外定位通过一个CSS属性"background-clip"来定义。

border-top-radius-radiu属性值之后,如果作用在一个元素上没有设置“border-radius”简写属性,那么这个属性值就会通过简写属性重新设置成它的初始值。

初始值0
适用元素all elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse. The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter.
是否是继承属性
Percentagesrefer to the corresponding dimension of the border box
适用媒体visual
计算值two absolute lengths or percentages
Animation typea length, percentage or calc();
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

How to read CSS syntax.

正式语法: <length-percentage>{1,2}

where
<length-percentage> = <length> | <percentage>

border-top-right-radius: radius               /* the corner is a circle    */  E.g. border-top-right-radius: 3px
border-top-right-radius: horizontal vertical  /* the corner is an ellipsis */  E.g. border-top-right-radius: 0.5em 1em

border-top-right-radius: inherit
 
 
 
 

之上:

radius
这是一个<length>或者一个<percentage>,标志着圆的半径在这个拐角用作边框。
horizontal
这是一个<length>或者一个<percentage> ,标志着椭圆的水平半长轴在这个拐角被用作边框。
vertical
这是一个<length>或者一个<percentage>,标志着椭圆的垂直半长轴在这个拐角被用作边框。

属性值

<长度>
标志着圆弧半径的大小或者椭圆的半长轴或半短轴,它属性值的数据类型表示任意单位通过<length>,负值是无效的。
<百分数>
标志着圆弧半径的大小或者椭圆的半长轴或半短轴,水平轴的百分值是相对盒模型的宽度,垂直轴的百分值是相对盒模型的宽度,负值是无效的。

例子

实例 代码
 
圆形的弧被用作边框
div {
  border-top-right-radius: 40px 40px;
}
 
 
 
 
椭圆的弧被用作边框
div {   
  border-top-right-radius: 40px 20px;
}
 
 
 
 
盒子是方形,圆形的弧被用作边框
div {   
  border-top-right-radius: 40%;
}
 
 
 
 
盒子不是方形,椭圆的弧被用作边框
div {   
  border-top-right-radius: 40%;
}
 
 
 
 
背景颜色在边框处剪切
div {
  border-top-right-radius:40%;
  border-style: black 3px double;
  background-color: rgb(250,20,70);
  background-clip: content-box;
}
 
 
 
 
 
 

技术参数

详细说明 状态 解释
CSS Backgrounds and Borders Module Level 3
border-top-right-radius
Candidate Recommendation Initial specification

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 0.2 -webkit

1.0 (1.0) - 12.0 (12.0)-moz
但有一个非标准的名称:
-moz-border-radius-topright

9.0 10.5 3.0 (522)-webkit
4.0 4.0 (2.0) 5.0 (532.5)
百分值 4.0 1.0 (1.0) 有一个bug (see note) 9.0 10.5 5.0 (532.5)
4.0 (2.0)
椭圆拐角 0.2 3.5 (1.9.1) 9.0 10.5 3.0 (522 )
特性 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本支持 ? ? ? ? ?

浏览器备注

火狐内核(Gecko)

  • 前缀版 (允许火狐1至火狐12) 属性使用一个不相同的名称 -moz-border-radius-topright, 相对最终属性当最终的名称被敲定之前火狐才算完成。
  • 在火狐4之前,这个 <percentage> 是相对盒子宽度,甚至是当指定半径作为一个高). 这被应用到 当-moz-border-radius-topright是单个值的时候,它总是画一个圆弧,而不是一个椭圆。
  • Gecko不可能正确地以点和虚线展示在圆角,它展示它们是以实线(bug 382721).

参见

边框半径相关的CSS属性:CSS速记 border-radius, 其它角的属性:border-top-left-radius, border-bottom-right-radius和 border-bottom-left-radius

文档标签和贡献者

此页面的贡献者: Sebastianz, teoli, ziyunfei, finder
最后编辑者: Sebastianz,