initial commit

1 files changed, 255 insertions, 0 deletions

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
+---
+<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>&lt;length&gt;</code></a> 或者 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/percentage" title="此页面仍未被本地化, 期待您的翻译!"><code>&lt;percentage&gt;</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>&lt;length&gt;</code></a> 或者 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/percentage" title="此页面仍未被本地化, 期待您的翻译!"><code>&lt;percentage&gt;</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>&lt;length&gt;</code></a> 或者 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/percentage" title="此页面仍未被本地化, 期待您的翻译!"><code>&lt;percentage&gt;</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>&lt;length&gt;</code></dt>
+ <dd><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/length" title="此页面仍未被本地化, 期待您的翻译!"><code>&lt;length&gt;</code></a> 定义圆形半径或椭圆的半长轴，半短轴。不能用负值。</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。不能用负值。</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0 {{property_prefix("-webkit")}}<br>
+    4.0</td>
+   <td>1.0 (1.0){{property_prefix("-moz")}}<sup>[1]</sup><br>
+    4.0 (2.0)</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.0 (522){{property_prefix("-webkit")}}<br>
+    5.0 (532.5)</td>
+  </tr>
+  <tr>
+   <td>Percentages</td>
+   <td>4.0</td>
+   <td>1.0 (1.0)<sup>[2]</sup><br>
+    4.0 (2.0)</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>5.0 (532.5)</td>
+  </tr>
+  <tr>
+   <td>Elliptical corners</td>
+   <td>1.0</td>
+   <td>3.5 (1.9.1)</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.0 (522)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Percentages</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Elliptical corners</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h5 id="备注：">备注：</h5>
+
+<p>[1] 火狐浏览器较早的版本(Firefox 1 到 Firefox 12) 在使用这个属性时需使用浏览器厂商前缀，<code>-moz-border-radius-topleft</code>,最近的版本Mozilla实现了这个属性的支持（在最终的版本被敲定之前）。</p>
+
+<p>Gecko内核在圆角处无法正确的表现点划线（dotted）和虚线（dashed）:它会将它们渲染成实线({{bug("382721")}}).</p>
+
+<p>[2] 在火狐4之前，这个 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/percentage" title="此页面仍未被本地化, 期待您的翻译!"><code>&lt;percentage&gt;</code></a> 是相对于盒子的宽度，即便指定了一个高做为半径. 这被意味着到 <code>-moz-border-radius-topleft</code>是单个值的时候，它总是画一个圆弧，而不是一个椭圆。</p>
+
+<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>