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
|
---
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
---
<h2 id="概要">概要</h2>
<p><strong><code>border-top-left-radius</code></strong> 用来设置元素左上角的圆角效果。这段圆弧（角）可以是圆或椭圆的一部分。如果其中有一个值为0，那么将无圆角效果（见<strong><code>border-top-left-radius取值方式</code></strong><code>)。</code></p>
<div style="text-align: center;"><img alt="border-radius.png" class="default internal" src="/@api/deki/files/6132/=border-radius.png"></div>
<p>盒模型的背景，可以是一张图片或一种颜色，会在边框处被剪裁，更甚至可以是一个圆；<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-left-radius属性值之后，</span>如果作用的元素上没有设置“border-radius”属性，那么这个属性值就会通过<a href="https://developer.mozilla.org/en/CSS/Shorthand_properties" title="en/CSS/Shorthand_properties">简写属性</a>重新设置成它的初始值。</div>
<h2 id="语法">语法</h2>
<pre class="brush:css">/* the corner is a circle */
/* border-top-left-radius: <em>radius</em> */
border-top-left-radius: 3px;
/* the corner is an ellipsis */
/* border-top-left-radius: <em>horizontal</em> <em>vertical</em> */
border-top-left-radius: 0.5em 1em;
border-top-left-radius: inherit;
</pre>
<div style="font-size: 0.9em;">
<h5 id="属性值：">属性值：</h5>
<dl style="padding-left: 6em;">
<dt style="float: left; width: 7.5em;"><em>radius</em></dt>
<dd style="padding-left: 7.5em;">可以是 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/length" title="此页面仍未被本地化, 期待您的翻译!"><code><length></code></a> 或者 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/percentage" title="此页面仍未被本地化, 期待您的翻译!"><code><percentage></code></a>，表示左上角边框的圆角半径。</dd>
<dt style="float: left; width: 7.5em;"><em>horizontal</em></dt>
<dd style="padding-left: 7.5em;">可以是 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/length" title="此页面仍未被本地化, 期待您的翻译!"><code><length></code></a> 或者 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/percentage" title="此页面仍未被本地化, 期待您的翻译!"><code><percentage></code></a><span style="font-size: 12.6000003814697px; line-height: 18.9000015258789px;">，</span>表示<span style="font-size: 12.6000003814697px; line-height: 18.9000015258789px;">椭圆的水平半长轴在被用作边框左上角的半径。</span></dd>
<dt style="float: left; width: 7.5em;"><em>vertical</em></dt>
<dd style="padding-left: 7.5em;">可以是 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/length" title="此页面仍未被本地化, 期待您的翻译!"><code><length></code></a> 或者 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/percentage" title="此页面仍未被本地化, 期待您的翻译!"><code><percentage></code></a><span style="font-size: 12.6000003814697px; line-height: 18.9000015258789px;">，</span>表示<span style="font-size: 12.6000003814697px; line-height: 18.9000015258789px;">椭圆的垂直半长轴在被用作边框左上角的半径。</span></dd>
</dl>
</div>
<h3 id="取值">取值</h3>
<dl>
<dt><code><length></code></dt>
<dd><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/length" title="此页面仍未被本地化, 期待您的翻译!"><code><length></code></a> 定义圆形半径或椭圆的半长轴，半短轴。不能用负值。</dd>
<dt><code><percentage></code></dt>
<dd>使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。不能用负值。</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
{{csssyntax}}
<h2 id="示例">示例</h2>
<table class="standard-table">
<thead>
<tr>
<th>实例</th>
<th>代码</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 1.5em;">
<div id="circle-arc" style="background-color: lightgreen; border: solid 1px black; border-top-left-radius: 40px 40px; width: 100px; height: 100px;"> </div>
</td>
<td>椭圆的弧被用作左上角边框
<pre class="brush:css">
div {
border-top-left-radius: 40px 40px;
}
</pre>
</td>
</tr>
<tr>
<td style="padding: 1.5em;">
<div id="ellipse-arc" style="background-color: lightgreen; border: solid 1px black; border-top-left-radius: 40px 20px; width: 100px; height: 100px;"> </div>
</td>
<td>椭圆的弧被用作左上角边框
<pre class="brush:css">
div {
border-top-left-radius: 40px 20px;
}
</pre>
</td>
</tr>
<tr>
<td style="padding: 1.5em;">
<div id="square-box-circle-arc" style="background-color: lightgreen; border: solid 1px black; border-top-left-radius: 40%; width: 100px; height: 100px;"> </div>
</td>
<td>盒子是方形的，圆弧被用作左上角边框
<pre class="brush: css">
div
border-top-left-radius: 40%;
}
</pre>
</td>
</tr>
<tr>
<td style="padding: 1.5em;">
<div id="not-square-ellipse-arc" style="background-color: lightgreen; border: solid 1px black; border-top-left-radius: 40%; width: 100px; height: 200px;"> </div>
</td>
<td>盒子不是方形的，椭圆的弧被用作左上角边框
<pre class="brush: css">
div {
border-top-left-radius: 40%;
}
</pre>
</td>
</tr>
<tr>
<td style="padding: 1.5em;">
<div id="clipped-border" style="background-color: rgb(250,20,70); background-clip: content-box; border: double 3px black; border-top-left-radius: 40%; width: 100px; height: 100px;"> </div>
</td>
<td>背景色在左上角被剪切
<pre class="brush: css">
div {
border-top-left-radius:40%;
border-style: black 3px double;
background-color: rgb(250,20,70);
background-clip: content-box;
}
</pre>
</td>
</tr>
</tbody>
</table>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">详细说明</th>
<th scope="col">状态</th>
<th scope="col">解释</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-left-radius')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
{{Compat("css.properties.border-top-left-radius")}}
<h2 id="另请参阅">另请参阅</h2>
<ul>
<li>border-radius 相关 CSS 属性: {{cssxref("border-radius")}}, 其他边角属性： {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, and {{cssxref("border-bottom-left-radius")}}.</li>
</ul>
|
