CSS-右下角的边框半径 | border-bottom-right-radius
该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没有圆角，拐角处是正方形的。
背景(图像或颜色)在边框中被裁剪，甚至是圆形的；裁剪的确切位置由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。
