border-top-right-radius

在本文章中

概要
语法
1. 属性值
例子
技术参数
浏览器兼容性
1. 浏览器备注
  1. 火狐内核（Gecko）
参见

概要

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

一个背景通常以一张图片或者颜色开始，在边框处被剪切，更甚至就是一个圆形；剪切的额外定位通过一个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`.
是否是继承属性	否
Percentages	refer to the corresponding dimension of the border box
适用媒体	visual
计算值	two absolute `length`s or `percentage`s
是否适用于 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
Basic support	4.0	4.0 (2.0)	9.0	10.5	5.0 (532.5)
百分值	4.0	1.0 (1.0) 有一个bug (see note)	9.0	10.5	5.0 (532.5)
百分值	4.0	4.0 (2.0)	9.0	10.5	5.0 (532.5)
椭圆拐角	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。

文档标签和贡献者

另见