MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

概要

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
是否适用于 CSS 动画yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

How to read CSS syntax.

正式语法: [ <length> | <percentage> ]{1,2}  
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

浏览器兼容性

特性 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,