border-top-right-radius

概要

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
计算值two absolute lengths or percentages
Animation typea length, percentage or calc();

语法

How to read CSS syntax.

正式语法: 
border-top-right-radius = 
<length-percentage [0,∞]>{1,2}

<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

浏览器兼容性

BCD tables only load in the browser

参见

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