path: root/files/zh-cn/web/css/border-top-left-radius/index.html

---
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>

{{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>

<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>