1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
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
---
<p>{{ CSSRef("CSS Borders") }}</p>
<h2 id="概要" style="line-height: 30px; font-size: 2.14285714285714rem;">概要</h2>
<p><code>border-top-right-radius属性设置元素的右上角</code>弧形，这个圆弧可能是一个椭圆，或者其中一个值是0的话，就是没有圆弧，换句话就是说拐角是方形的。</p>
<div style="text-align: center;"><img alt="border-top-right-radius.png" class="default internal" src="https://developer.mozilla.org/@api/deki/files/6133/=border-top-right-radius.png"></div>
<p>一个背景通常以一张图片或者颜色开始，在边框处被<span style="background-color: rgba(212, 221, 228, 0.14902);">剪切</span>，更甚至就是一个圆形；<span style="background-color: rgba(212, 221, 228, 0.14902);">剪切</span>的额外定位通过一个CSS属性"background-clip"来定义。</p>
<div class="note">在<span style="font-family: consolas,monaco,andale mono,monospace;">border-top-radius-radiu属性值之后，</span>如果作用在一个元素上没有设置“border-radius”简写属性，那么这个属性值就会通过<a href="https://developer.mozilla.org/en/CSS/Shorthand_properties" title="en/CSS/Shorthand_properties">简写属性</a>重新设置成它的初始值。</div>
<p>{{cssinfo}}</p>
<h2 id="语法" style="line-height: 30px; font-size: 2.14285714285714rem;">语法</h2>
<p><a class="syntaxbox-help icon-only" href="https://developer.mozilla.org/en-US/docs/docs/Web/CSS/Value_definition_syntax" lang="en">How to read CSS syntax.</a></p>
<pre class="twopartsyntaxbox" style="font-size: 14px;"><a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">正式语法</a>: {{csssyntax("border-top-right-radius")}} </pre>
<pre class="language-html" style="padding: 1em 0px 1em 30px; font-size: 14px; color: rgb(77, 78, 83);"><code class="language-html" style="direction: ltr;">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</code></pre>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"> </div>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"> </div>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"> </div>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"> </div>
<div style="font-size: 0.9em;">
<p>之上:</p>
<dl style="padding-left: 6em;">
<dt style="float: left; width: 7.5em;"><em>radius</em></dt>
<dd style="padding-left: 7.5em;">这是一个<span style="font-size: 12.6000003814697px; line-height: 18.9000015258789px;">{{cssxref("<length>")}}</span>或者一个<span style="font-size: 12.6000003814697px; line-height: 18.9000015258789px;">{{cssxref("<percentage>")}}</span>，标志着圆的半径在这个拐角用作边框。</dd>
<dt style="float: left; width: 7.5em;"><em>horizontal</em></dt>
<dd style="padding-left: 7.5em;"><span style="font-size: 12.6000003814697px; line-height: 18.9000015258789px;">这是一个{{cssxref("<length>")}}或者一个{{cssxref("<percentage>")}} ，标志着椭圆的水平半长轴在这个拐角被用作边框。</span></dd>
<dt style="float: left; width: 7.5em;"><em>vertical</em></dt>
<dd style="padding-left: 7.5em;"><span style="font-size: 12.6000003814697px; line-height: 18.9000015258789px;">这是一个{{cssxref("<length>")}}或者一个{{cssxref("<percentage>")}}，标志着椭圆的垂直半长轴在这个拐角被用作边框。</span></dd>
</dl>
</div>
<h3 id="属性值" style="line-height: 24px; font-size: 1.71428571428571rem;">属性值</h3>
<dl>
<dt><code><长度></code></dt>
<dd>标志着圆弧半径的大小或者椭圆的半长轴或半短轴，它属性值的数据类型表示任意单位通过{{cssxref("<length>")}}，负值是无效的。</dd>
<dt><code><百分数></code></dt>
<dd>标志着圆弧半径的大小或者椭圆的半长轴或半短轴，水平轴的百分值是相对盒模型的宽度，垂直轴的百分值是相对盒模型的宽度，负值是无效的。</dd>
</dl>
<h2 id="例子" style="line-height: 30px; font-size: 2.14285714285714rem;">例子</h2>
<table class="standard-table" style="border: 2px solid rgb(255, 255, 255);">
<thead>
<tr>
<th style="border-width: 2px; border-style: solid; border-color: rgb(255, 255, 255) rgb(255, 255, 255) rgb(212, 221, 228);">实例</th>
<th style="border-width: 2px; border-style: solid; border-color: rgb(255, 255, 255) rgb(255, 255, 255) rgb(212, 221, 228);">代码</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 1.5em; border: 2px solid rgb(255, 255, 255);">
<div style="border: 1px solid black; border-top-right-radius: 40px; width: 100px; height: 100px; background-color: rgb(144, 238, 144);"> </div>
</td>
<td style="border: 2px solid rgb(255, 255, 255);">圆形的弧被用作边框
<pre class="language-html" style="padding: 1em 0px 1em 30px;">
<code class="language-html" style="direction: ltr;">div {
border-top-right-radius: 40px 40px;
}</code></pre>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"> </div>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"> </div>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"> </div>
</td>
</tr>
<tr>
<td style="padding: 1.5em; border: 2px solid rgb(255, 255, 255);">
<div style="border: 1px solid black; border-top-right-radius: 40px 20px; width: 100px; height: 100px; background-color: rgb(144, 238, 144);"> </div>
</td>
<td style="border: 2px solid rgb(255, 255, 255);">椭圆的弧被用作边框
<pre class="language-html" style="padding: 1em 0px 1em 30px;">
<code class="language-html" style="direction: ltr;">div {
border-top-right-radius: 40px 20px;
}</code></pre>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"> </div>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"> </div>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"> </div>
</td>
</tr>
<tr>
<td style="padding: 1.5em; border: 2px solid rgb(255, 255, 255);">
<div style="border: 1px solid black; border-top-right-radius: 40%; width: 100px; height: 100px; background-color: rgb(144, 238, 144);"> </div>
</td>
<td style="border: 2px solid rgb(255, 255, 255);">盒子是方形，圆形的弧被用作边框
<pre class="language-html" style="padding: 1em 0px 1em 30px;">
<code class="language-html" style="direction: ltr;">div {
border-top-right-radius: 40%;
}</code></pre>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"> </div>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"> </div>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"> </div>
</td>
</tr>
<tr>
<td style="padding: 1.5em; border: 2px solid rgb(255, 255, 255);">
<div style="border: 1px solid black; border-top-right-radius: 40%; width: 100px; height: 200px; background-color: rgb(144, 238, 144);"> </div>
</td>
<td style="border: 2px solid rgb(255, 255, 255);">盒子不是方形，椭圆的弧被用作边框
<pre class="language-html" style="padding: 1em 0px 1em 30px;">
<code class="language-html" style="direction: ltr;">div {
border-top-right-radius: 40%;
}</code></pre>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"> </div>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"> </div>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"> </div>
</td>
</tr>
<tr>
<td style="padding: 1.5em; border: 2px solid rgb(255, 255, 255);">
<div style="border: 3px double black; border-top-right-radius: 40%; height: 100px; width: 100px; background-color: rgb(250, 20, 70); background-clip: content-box;"> </div>
</td>
<td style="border: 2px solid rgb(255, 255, 255);">背景颜色在边框处剪切
<pre class="language-html" style="padding: 1em 0px 1em 30px;">
<code class="language-html" style="direction: ltr;">div {
border-top-right-radius:40%;
border-style: black 3px double;
background-color: rgb(250,20,70);
background-clip: content-box;
}</code></pre>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"> </div>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"> </div>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"> </div>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"> </div>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 76px; background: 0px 0px;"> </div>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 95px; background: 0px 0px;"> </div>
</td>
</tr>
</tbody>
</table>
<h2 id="Specifications" name="Specifications" style="line-height: 30px; font-size: 2.14285714285714rem;">技术参数</h2>
<table class="standard-table" style="border: 2px solid rgb(255, 255, 255);">
<thead>
<tr>
<th scope="col" style="border-width: 2px; border-style: solid; border-color: rgb(255, 255, 255) rgb(255, 255, 255) rgb(212, 221, 228);">详细说明</th>
<th scope="col" style="border-width: 2px; border-style: solid; border-color: rgb(255, 255, 255) rgb(255, 255, 255) rgb(212, 221, 228);">状态</th>
<th scope="col" style="border-width: 2px; border-style: solid; border-color: rgb(255, 255, 255) rgb(255, 255, 255) rgb(212, 221, 228);">解释</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 2px solid rgb(255, 255, 255);">{{ SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-right-radius') }}</td>
<td style="border: 2px solid rgb(255, 255, 255);">{{ Spec2('CSS3 Backgrounds') }}</td>
<td style="border: 2px solid rgb(255, 255, 255);">Initial specification</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性" style="line-height: 30px; font-size: 2.14285714285714rem;">浏览器兼容性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table" style="border-color: transparent; border-style: solid;">
<tbody>
<tr>
<th style="border-style: solid; border-color: rgba(212, 221, 228, 0); line-height: 16px;">特性</th>
<th style="border-style: solid; border-color: rgba(212, 221, 228, 0); line-height: 16px;">Chrome</th>
<th style="border-style: solid; border-color: rgba(212, 221, 228, 0); line-height: 16px;">Firefox (Gecko)</th>
<th style="border-style: solid; border-color: rgba(212, 221, 228, 0); line-height: 16px;">Internet Explorer</th>
<th style="border-style: solid; border-color: rgba(212, 221, 228, 0); line-height: 16px;">Opera</th>
<th style="border-style: solid; border-color: rgba(212, 221, 228, 0); line-height: 16px;">Safari (WebKit)</th>
</tr>
<tr>
<td rowspan="2" style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);"><span style="font-size: 12px; line-height: 18px;">Basic support</span></td>
<td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">0.2 {{ property_prefix("-webkit") }}</td>
<td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">
<p>1.0 (1.0) - 12.0 (12.0){{ property_prefix("-moz") }}<br>
但有一个非标准的名称:<br>
<code>-moz-border-radius-topright</code></p>
</td>
<td rowspan="2" style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">9.0</td>
<td rowspan="2" style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">10.5</td>
<td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">3.0 (522){{ property_prefix("-webkit") }}</td>
</tr>
<tr>
<td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">4.0</td>
<td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">4.0 (2.0)</td>
<td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">5.0 (532.5)</td>
</tr>
<tr>
<td rowspan="2" style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">百分值</td>
<td rowspan="2" style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">4.0</td>
<td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">1.0 (1.0) 有一个bug (see note)</td>
<td rowspan="2" style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">9.0</td>
<td rowspan="2" style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">10.5</td>
<td rowspan="2" style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">5.0 (532.5)</td>
</tr>
<tr>
<td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">4.0 (2.0)</td>
</tr>
<tr>
<td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">椭圆拐角</td>
<td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">0.2</td>
<td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">3.5 (1.9.1)</td>
<td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">9.0</td>
<td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">10.5</td>
<td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">3.0 (522 )</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table" style="border-color: transparent; border-style: solid;">
<tbody>
<tr>
<th style="border-style: solid; border-color: rgba(212, 221, 228, 0); line-height: 16px;">特性</th>
<th style="border-style: solid; border-color: rgba(212, 221, 228, 0); line-height: 16px;">Android</th>
<th style="border-style: solid; border-color: rgba(212, 221, 228, 0); line-height: 16px;">Firefox Mobile (Gecko)</th>
<th style="border-style: solid; border-color: rgba(212, 221, 228, 0); line-height: 16px;">IE Phone</th>
<th style="border-style: solid; border-color: rgba(212, 221, 228, 0); line-height: 16px;">Opera Mobile</th>
<th style="border-style: solid; border-color: rgba(212, 221, 228, 0); line-height: 16px;">Safari Mobile</th>
</tr>
<tr>
<td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">基本支持</td>
<td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">{{CompatUnknown()}}</td>
<td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">{{CompatUnknown()}}</td>
<td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">{{CompatUnknown()}}</td>
<td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">{{CompatUnknown()}}</td>
<td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">{{CompatUnknown()}}</td>
</tr>
</tbody>
</table>
</div>
<h3 id="浏览器备注" style="line-height: 24px; font-size: 1.71428571428571rem;">浏览器备注</h3>
<h4 id="火狐内核（Gecko）" style="line-height: 18px; font-size: 1.28571428571429rem;">火狐内核（Gecko）</h4>
<ul>
<li>前缀版 (允许火狐1至火狐12) 属性使用一个不相同的名称 <code>-moz-border-radius-topright</code>, 相对最终属性当最终的名称被敲定之前火狐才算完成。</li>
<li>在火狐4之前，这个 {{cssxref("<percentage>")}} 是相对盒子宽度，甚至是当指定半径作为一个高). 这被应用到 当<code>-moz-border-radius-topright</code>是单个值的时候，它总是画一个圆弧，而不是一个椭圆。</li>
<li>Gecko不可能正确地以点和虚线展示在圆角，它展示它们是以实线({{ bug("382721") }}).</li>
</ul>
<h2 id="参见" style="line-height: 30px; font-size: 2.14285714285714rem;"><span class="client_def_list_word_bar">参见</span></h2>
<p>边框半径相关的CSS属性：CSS速记 {{ cssxref("border-radius") }}, 其它角的属性：{{ cssxref("border-top-left-radius") }}, {{ cssxref("border-bottom-right-radius") }}和 {{ cssxref("border-bottom-left-radius") }}。</p>
|
