w3study.net

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

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

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

语法

/* the corner is a circle */
/* border-top-right-radius: radius */
border-top-right-radius: 3px;

/* the corner is an ellipse */
/* border-top-right-radius: horizontal vertical */
border-top-right-radius: 0.5em 1em;

border-top-right-radius: inherit;

/* Global values */
border-top-right-radius: inherit;
border-top-right-radius: initial;
border-top-right-radius: revert;
border-top-right-radius: revert-layer;
border-top-right-radius: unset;

之上：

• radius
  • : 这是一个 {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}}，标志着圆的半径在这个拐角用作边框。
• horizontal
  • : 这是一个 {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}}，标志着椭圆的水平半长轴在这个拐角被用作边框。
• vertical
  • : 这是一个 {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}}，标志着椭圆的垂直半长轴在这个拐角被用作边框。

属性值

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

形式定义

{{CSSInfo}}

形式语法

{{csssyntax}}

示例

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;
}