CSS-右下角的边框半径 | border-bottom-right-radius

  1. 云栖社区>
  2. 博客>
  3. 正文

CSS-右下角的边框半径 | border-bottom-right-radius

阿德明网络 2018-09-13 10:54:57 浏览733
展开阅读全文

border-bottom-right-radius属性设置元素右下角的舍入。

/* The corner is a circle */
/* border-bottom-right-radius: radius */
border-bottom-right-radius: 3px;

/* Percentage values */
border-bottom-right-radius: 20%; /* corner of a circle if box is a square or else corner of a rectangle */
border-bottom-right-radius: 20% 20%; /* same as above */ /* 20% of horizontal(width) and vertical(height) */
border-bottom-right-radius: 20% 10%; /* 20% of horizontal(width) and 10% of vertical(height) */

/*The corner is an ellipsis */
/* border-bottom-right-radius: horizontal vertical */
border-bottom-right-radius: 0.5em 1em;

border-bottom-right-radius: inherit;

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

zeko0hw5os.png

背景(图像或颜色)在边框中被裁剪,甚至是圆形的;裁剪的确切位置由background-clip财产。

如果此属性的值未在border-radius属性之后应用于元素的速记属性。border-bottom-right-radius属性将此属性的值重置为初始值。速记性质...

Initial value

0

Applies to

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.

Inherited

no

Percentages

refer to the corresponding dimension of the border box

Media

visual

Computed value

two absolute <length>s or <percentage>s

Animation type

a length, percentage or calc();

Canonical order

the unique non-ambiguous order defined by the formal grammar

句法

只有一个价值:

  • 值是<length>或者是<percentage>表示圆圈的半径,用于那个角落的边框。有两个值:
  • 第一个值是<length>或者是<percentage>表示省略号的水平半长轴,用于该角的边框。
  • 第二个值是<percentage>表示省略号的垂直半长轴,用于该角的边框。

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

形式语法

<length-percentage>{1,2}where 
<length-percentage> = <length> | <percentage>

实例

Live example

Code

.

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

.

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

.

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

.

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

.

The background color is clipped at the border div { border-bottom-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-bottom-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 49 -webkit- 2 1 — 12 (as -moz-border-radius-topright)

9

10.5

5 3 -webkit-

Percentages

4

(Yes)

4 13

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)

?

?

?

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

2. 从Firefox 44到48,-webkit-前缀可用于layout.css.prefixes.webkit首选项。从Firefox 49开始,首选项默认为true。

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

另见

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

网友评论

登录后评论
0/500
评论
阿德明网络
+ 关注