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-right-radius/index.html | 284 +++++++++++++++++++++ 1 file changed, 284 insertions(+) create mode 100644 files/zh-cn/web/css/border-top-right-radius/index.html (limited to 'files/zh-cn/web/css/border-top-right-radius') diff --git a/files/zh-cn/web/css/border-top-right-radius/index.html b/files/zh-cn/web/css/border-top-right-radius/index.html new file mode 100644 index 0000000000..a818e58307 --- /dev/null +++ b/files/zh-cn/web/css/border-top-right-radius/index.html @@ -0,0 +1,284 @@ +--- +title: border-top-right-radius +slug: Web/CSS/border-top-right-radius +tags: + - CSS属性 + - CSS边框 + - Layout + - 互联网 + - 参考 + - 需要移动浏览器兼容 +translation_of: Web/CSS/border-top-right-radius +--- +

{{ CSSRef("CSS Borders") }}

+ +

概要

+ +

border-top-right-radius属性设置元素的右上角弧形，这个圆弧可能是一个椭圆，或者其中一个值是0的话，就是没有圆弧，换句话就是说拐角是方形的。

+ +
border-top-right-radius.png
+ +

一个背景通常以一张图片或者颜色开始，在边框处被剪切，更甚至就是一个圆形；剪切的额外定位通过一个CSS属性"background-clip"来定义。

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

{{cssinfo}}

+ +

语法

+ +

How to read CSS syntax.

+ +
正式语法: {{csssyntax("border-top-right-radius")}}
+ +
border-top-right-radius: radius               /* the corner is a circle    */  E.g. border-top-right-radius: 3px
+border-top-right-radius: horizontal vertical  /* the corner is an ellipsis */  E.g. border-top-right-radius: 0.5em 1em
+
+border-top-right-radius: inherit
+ +
 
+ +
 
+ +
 
+ +
 
+ +
+

之上:

+ +
+
radius
+
这是一个{{cssxref("<length>")}}或者一个{{cssxref("<percentage>")}}，标志着圆的半径在这个拐角用作边框。
+
horizontal
+
这是一个{{cssxref("<length>")}}或者一个{{cssxref("<percentage>")}} ，标志着椭圆的水平半长轴在这个拐角被用作边框。
+
vertical
+
这是一个{{cssxref("<length>")}}或者一个{{cssxref("<percentage>")}}，标志着椭圆的垂直半长轴在这个拐角被用作边框。
+
+
+ +

属性值

+ +
+
<长度>
+
标志着圆弧半径的大小或者椭圆的半长轴或半短轴，它属性值的数据类型表示任意单位通过{{cssxref("<length>")}}，负值是无效的。
+
<百分数>
+
标志着圆弧半径的大小或者椭圆的半长轴或半短轴，水平轴的百分值是相对盒模型的宽度，垂直轴的百分值是相对盒模型的宽度，负值是无效的。
+
+ +

例子

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
实例代码
+
 
+ 		圆形的弧被用作边框 + 
+div {
+  border-top-right-radius: 40px 40px;
+}
+ +
 
+ +
 
+ +
 
+
+
 
+ 		椭圆的弧被用作边框 + 
+div {
+  border-top-right-radius: 40px 20px;
+}
+ +
 
+ +
 
+ +
 
+
+
 
+ 		盒子是方形，圆形的弧被用作边框 + 
+div {
+  border-top-right-radius: 40%;
+}
+ +
 
+ +
 
+ +
 
+
+
 
+ 		盒子不是方形，椭圆的弧被用作边框 + 
+div {
+  border-top-right-radius: 40%;
+}
+ +
 
+ +
 
+ +
 
+
+
 
+ 		背景颜色在边框处剪切 + 
+div {
+  border-top-right-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-right-radius') }}{{ Spec2('CSS3 Backgrounds') }}Initial specification
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
特性ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support0.2 {{ property_prefix("-webkit") }} +

1.0 (1.0) - 12.0 (12.0){{ property_prefix("-moz") }}
+ 但有一个非标准的名称:
+ -moz-border-radius-topright

+ 		9.010.53.0 (522){{ property_prefix("-webkit") }}
4.04.0 (2.0)5.0 (532.5)
百分值4.01.0 (1.0) 有一个bug (see note)9.010.55.0 (532.5)
4.0 (2.0)
椭圆拐角0.23.5 (1.9.1)9.010.53.0 (522 )
+
+ +
+ + + + + + + + + + + + + + + + + + + +
特性AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
基本支持{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}
+
+ +

浏览器备注

+ +

火狐内核（Gecko）

+ + + +

参见

+ +

边框半径相关的CSS属性：CSS速记 {{ cssxref("border-radius") }}, 其它角的属性：{{ cssxref("border-top-left-radius") }}, {{ cssxref("border-bottom-right-radius") }}和 {{ cssxref("border-bottom-left-radius") }}。

-- cgit v1.2.3-54-g00ecf