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-left-radius/index.html | 270 +++++++++++++++++++++ 1 file changed, 270 insertions(+) create mode 100644 files/zh-cn/web/css/border-bottom-left-radius/index.html (limited to 'files/zh-cn/web/css/border-bottom-left-radius') diff --git a/files/zh-cn/web/css/border-bottom-left-radius/index.html b/files/zh-cn/web/css/border-bottom-left-radius/index.html new file mode 100644 index 0000000000..4f33b40f4c --- /dev/null +++ b/files/zh-cn/web/css/border-bottom-left-radius/index.html @@ -0,0 +1,270 @@ +--- +title: 左下边框圆角 +slug: Web/CSS/border-bottom-left-radius +translation_of: Web/CSS/border-bottom-left-radius +--- +
{{CSSRef}}
+ +

Summary

+ +

总览

+ +

border-bottom-left-radius 这个css属性设置元素左下角的圆角。圆角可以是圆或椭圆（注：应为圆或椭圆的一部分），或者当其中一个值为0时，圆角将不被设置，这时这个角将展示为直角。

+ +
border-bottom-left-radius.png
+ +

一个无论是图像或颜色的背景，都会在边框上被裁剪，即使背景是圆角的; 裁剪的确切位置由 {{cssxref("background-clip")}} 属性定义.

+ +
如果该属性的值没有被一个在border-bottom-left-radius 属性后，作用于当前元素上的{{cssxref("border-radius")}}简写属性设置，那么该属性值将会被shorthand property重置为初始值。
+ +

{{cssinfo}}

+ +

语法

+ +
/* 圆形 */
+/* border-bottom-left-radius: radius */
+border-bottom-left-radius: 3px;
+
+/* 椭圆形 */
+/* border-bottom-left-radius: 水平方向 垂直方向 */
+border-bottom-left-radius: 0.5em 1em;
+
+border-bottom-left-radius: inherit;
+
+ +
+

where:

+ +
+
radius
+
Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting the radius of the circle to use for the border in that corner.
+
horizontal
+
Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting the horizontal semi-major axis of the ellipsis to use for the border in that corner.
+
vertical
+
Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting the vertical semi-major axis of the ellipsis to use for the border in that corner.
+
+
+ +

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-left-radius: 40px 40px;
+}
+
+
+
+
.
+
+ 		An arc of ellipse is used as the border + 
+div {
+  border-bottom-left-radius: 40px 20px;
+}
+
+
+
+
.
+
+ 		The box is a square: an arc of circle is used as the border + 
+div {
+  border-bottom-left-radius: 40%;
+}
+
+
+
+
.
+
+ 		The box is not a square: an arc of ellipse is used as the border + 
+div {
+  border-bottom-left-radius: 40%;
+}
+
+
+
+
.
+
+ 		The background color is clipped at the border + 
+div {
+  border-bottom-left-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-bottom-left-radius', 'border-bottom-left-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{{CompatUnknown}}1.0 (1.0)[2]
+ 4.0 (2.0)		9.010.55.0 (532.5)
Elliptical corners1.0{{CompatUnknown}}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}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Elliptical corners{{CompatUnknown}}{{CompatUnknown}}{{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-bottomleft, than the final property as Mozilla implemented it before the final name was coined.

+ +

[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-bottomleft 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-bottom-right-radius")}}, and {{cssxref("border-top-left-radius")}}.

-- cgit v1.2.3-54-g00ecf