corners边框_边框右上角半径 | border-top-right-radius (Backgrounds & Borders) – CSS 中文开发手册 - Break易站...

CSS 中文开发手册

边框右上角半径 | border-top-right-radius (Backgrounds & Borders) - CSS 中文开发手册

border-top-right-radiusCSS属性设置元素的右上角的圆。

/* 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;

舍入可以是圆或椭圆，或者如果其中一个值是0没有圆角，拐角处是正方形的。

一个背景，一个图像或一个颜色，被剪裁在边界，甚至是一个圆形的; 剪辑的确切位置由background-clip属性的值定义。

如果此属性的值未在CSS属性border-radius后应用于元素的速记属性中设置，则border-top-radius-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.

是否是继承属性

no

Percentages

refer to the corresponding dimension of the border box

适用媒体

visual

计算值

two absolute s or s

Animation type

a length, percentage or calc();

正规顺序

the unique non-ambiguous order defined by the formal grammar

语法

只有一个值：

值是或者是表示圆圈的半径，用于那个角落的边框。有两个值：第一个值是或者是表示省略号的水平半长轴，用于该角的边框。第二个值是表示省略号的垂直半长轴，用于该角的边框。

值

表示圆周半径的大小，或省略的半长和半短轴的大小。作为绝对长度，它可以用css允许的任何单位表示。数据类型。水平轴的百分比指框的宽度，垂直轴的百分比指框的高度。负值无效。

正式语法

{1,2}where

= |

示例

Live example

Code

​

An arc of circle is used as the border div { border-top-right-radius: 40px 40px; }

​

An arc of ellipse is used as the border div { border-top-right-radius: 40px 20px; }

​

The box is a square: an arc of circle is used as the border div { border-top-right-radius: 40%; }

.

The box is not a square: an arc of ellipse is used as the border div { border-top-right-radius: 40%; }

​

The background color is clipped at the border div { border-top-right-radius:40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; }

规范

Specification

Status

Comment

CSS Backgrounds and Borders Module Level 3The definition of 'border-top-right-radius' in that specification.

Candidate Recommendation

Initial definition

浏览器兼容性

Feature

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

Basic Support

4 1 -webkit-

(Yes) (Yes) -webkit-

41 1 — 12 (as -moz-border-radius-topright)

9

10.5

5 3 -webkit-

Percentages

4

(Yes)

4 12

9

10.5

5

Ellipitcal corners

1

(Yes)

3.5

9

10.5

3

Feature

Android

Chrome for Android

Edge mobile

Firefox for Android

IE mobile

Opera Android

iOS Safari

Basic Support

?

?

(Yes) (Yes) -webkit-

(Yes)1

?

?

?

Percentages

?

?

(Yes)

(Yes)

?

?

?

Ellipitcal corners

?

?

(Yes)

(Yes)

?

?

?

在Firefox 50之前，圆角的边框样式总是呈现出border-style设置为solid的样式，这已在Firefox 50中修复。

在Firefox 4之前，即使为高度指定半径，也会与框的宽度相关。这意味着-moz-border-radius-topright总是绘制一个圆弧，而不是一个椭圆，后面是单个值。

另见

边界半径相关的CSS属性：CSS简写属性border-radius，各个顶角的属性：border-top-right-radius，border-bottom-right-radius，和border-top-left-radius。