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-top-left-radius/index.html | 255 +++++++++++++++++++++ 1 file changed, 255 insertions(+) create mode 100644 files/zh-cn/web/css/border-top-left-radius/index.html (limited to 'files/zh-cn/web/css/border-top-left-radius') diff --git a/files/zh-cn/web/css/border-top-left-radius/index.html b/files/zh-cn/web/css/border-top-left-radius/index.html new file mode 100644 index 0000000000..716b236743 --- /dev/null +++ b/files/zh-cn/web/css/border-top-left-radius/index.html @@ -0,0 +1,255 @@ +--- +title: border-top-left-radius +slug: Web/CSS/border-top-left-radius +tags: + - CSS + - CSS属性 + - CSS边框 + - CSS边框圆角 +translation_of: Web/CSS/border-top-left-radius +--- +

概要

+ +

border-top-left-radius 用来设置元素左上角的圆角效果。这段圆弧（角）可以是圆或椭圆的一部分。如果其中有一个值为0，那么将无圆角效果（见border-top-left-radius取值方式)。

+ +
border-radius.png
+ +

盒模型的背景，可以是一张图片或一种颜色，会在边框处被剪裁，更甚至可以是一个圆；剪切的额外定位通过另一个CSS属性"background-clip"来定义。

+ +
在border-top-left-radius属性值之后，如果作用的元素上没有设置“border-radius”属性，那么这个属性值就会通过简写属性重新设置成它的初始值。
+ +

语法

+ +
/* the corner is a circle */
+/* border-top-left-radius: radius */
+border-top-left-radius: 3px;
+
+/* the corner is an ellipsis */
+/* border-top-left-radius: horizontal vertical */
+border-top-left-radius: 0.5em 1em;
+
+border-top-left-radius: inherit;
+
+ +
+
属性值：
+ +
+
radius
+
可以是 <length> 或者 <percentage>，表示左上角边框的圆角半径。
+
horizontal
+
可以是 <length> 或者 <percentage>，表示椭圆的水平半长轴在被用作边框左上角的半径。
+
vertical
+
可以是 <length> 或者 <percentage>，表示椭圆的垂直半长轴在被用作边框左上角的半径。
+
+
+ +

取值

+ +
+
<length>
+
<length> 定义圆形半径或椭圆的半长轴，半短轴。不能用负值。
+
<percentage>
+
使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。不能用负值。
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

示例

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
实例代码
+
 
+ 		椭圆的弧被用作左上角边框 + 
+div {
+  border-top-left-radius: 40px 40px;
+}
+
+
+
 
+ 		椭圆的弧被用作左上角边框 + 
+div {
+  border-top-left-radius: 40px 20px;
+}
+
+
+
 
+ 		盒子是方形的，圆弧被用作左上角边框 + 
+div
+  border-top-left-radius: 40%;
+}
+
+
+
 
+ 		盒子不是方形的，椭圆的弧被用作左上角边框 + 
+div {
+  border-top-left-radius: 40%;
+}
+
+
+
 
+ 		背景色在左上角被剪切 + 
+div {
+  border-top-left-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+
+
+ +

规范

+ + + + + + + + + + + + + + + + +
详细说明状态解释
{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-left-radius')}}{{Spec2('CSS3 Backgrounds')}}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

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

 

+ +
备注：
+ +

[1] 火狐浏览器较早的版本(Firefox 1 到 Firefox 12) 在使用这个属性时需使用浏览器厂商前缀，-moz-border-radius-topleft,最近的版本Mozilla实现了这个属性的支持（在最终的版本被敲定之前）。

+ +

Gecko内核在圆角处无法正确的表现点划线（dotted）和虚线（dashed）:它会将它们渲染成实线({{bug("382721")}}).

+ +

[2] 在火狐4之前，这个 <percentage> 是相对于盒子的宽度，即便指定了一个高做为半径. 这被意味着到 -moz-border-radius-topleft是单个值的时候，它总是画一个圆弧，而不是一个椭圆。

+ +

另请参阅

+ + -- cgit v1.2.3-54-g00ecf