From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/css/border-bottom-right-radius/index.html | 272 +++++++++++++++++++++ 1 file changed, 272 insertions(+) create mode 100644 files/zh-cn/web/css/border-bottom-right-radius/index.html (limited to 'files/zh-cn/web/css/border-bottom-right-radius') diff --git a/files/zh-cn/web/css/border-bottom-right-radius/index.html b/files/zh-cn/web/css/border-bottom-right-radius/index.html new file mode 100644 index 0000000000..d63776da87 --- /dev/null +++ b/files/zh-cn/web/css/border-bottom-right-radius/index.html @@ -0,0 +1,272 @@ +--- +title: border-bottom-right-radius +slug: Web/CSS/border-bottom-right-radius +translation_of: Web/CSS/border-bottom-right-radius +--- +
{{CSSRef}}
+ +

The border-bottom-right-radius CSS property sets the rounding of the bottom-right corner of the element.

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

The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.

+ +
border-bottom-right-radius.png
+ +

A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the {{cssxref("background-clip")}} property.

+ +
If the value of this property is not set in a {{cssxref("border-radius")}} shorthand property that is applied to the element after the border-bottom-right-radius CSS property, the value of this property is then reset to its initial value by the shorthand property.
+ +

{{cssinfo}}

+ +

Syntax

+ +

With one value:

+ + + +

With two values:

+ + + +

Values

+ +
+
<length-percentage>
+
Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. As absolute length it can be expressed in any unit allowed by the CSS {{cssxref("<length>")}} data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Live exampleCode
+
+
.
+
+ 		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;
+}
+
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}}{{Spec2('CSS3 Backgrounds')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0 {{property_prefix("-webkit")}}
+ 4.0		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		1.0 (1.0){{property_prefix("-moz")}}[1]
+ 4.0 (2.0)[3]		9.010.53.0 (522){{property_prefix("-webkit")}}
+ 5.0 (532.5)
Percentages4.0{{CompatVersionUnknown}}1.0 (1.0)[2]
+ 4.0 (2.0)		9.010.55.0 (532.5)
Elliptical corners1.0{{CompatVersionUnknown}}3.5 (1.9.1)9.010.53.0 (522)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Percentages{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Elliptical corners{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] The prefixed version (allowed from Firefox 1 to Firefox 12) of this property uses a different name, -moz-border-radius-bottomright.

+ +

[2] Before Firefox 4, the {{cssxref("<percentage>")}} was relative to the width of the box even when specifying the radius for a height). This implied that -moz-border-radius-bottomright was always drawing an arc of circle, and never an ellipse, when followed by a single value.

+ +

[3] Prior to Gecko 50.0 {{geckoRelease("50.0")}}, border styles of rounded corners were always rendered as if border-style was solid. This has been fixed in Gecko 50.0.

+ +

In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to true.

+ +

See also

+ +

The border-radius-related CSS properties: the CSS shorthand {{cssxref("border-radius")}}, the properties for the other corners: {{cssxref("border-top-right-radius")}}, {{cssxref("border-top-left-radius")}}, and {{cssxref("border-bottom-left-radius")}}.

-- cgit v1.2.3-54-g00ecf