diff options
Diffstat (limited to 'files/zh-cn/web/css/border-radius')
| -rw-r--r-- | files/zh-cn/web/css/border-radius/index.html | 336 |
1 files changed, 336 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/border-radius/index.html b/files/zh-cn/web/css/border-radius/index.html new file mode 100644 index 0000000000..8284b8d2f8 --- /dev/null +++ b/files/zh-cn/web/css/border-radius/index.html @@ -0,0 +1,336 @@ +--- +title: border-radius +slug: Web/CSS/border-radius +tags: + - CSS + - CSS 属性 + - CSS 边框 + - Web + - 参考 + - 布局 +translation_of: Web/CSS/border-radius +--- +<p>{{ CSSRef("CSS Borders") }}</p> + +<p><a href="/zh-CN/docs/Web/CSS">CSS</a> 属性 <strong><code>border-radius</code></strong> 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。</p> + +<p><img alt="Images of CSS3 rounded corners: no rounding, rounding w/ an arc of circle, rounding w/ an arc of ellipse" class="default internal" src="/files/3638/border-radius-sh.png" style="height: 164px; width: 549px;"></p> + +<div>{{EmbedInteractiveExample("pages/css/border-radius.html")}}</div> + + + +<p>该属性是一个 <a href="/zh-CN/docs/Web/CSS/Shorthand_properties">简写属性</a>，是为了将这四个属性 {{Cssxref("border-top-left-radius")}}、{{Cssxref("border-top-right-radius")}}、{{Cssxref("border-bottom-right-radius")}}，和 {{Cssxref("border-bottom-left-radius")}} 简写为一个属性。</p> + +<p>即使元素没有边框，圆角也可以用到 {{ Cssxref("background") }} 上面，具体效果受 {{ Cssxref("background-clip") }} 影响。</p> + +<p>当 {{Cssxref("border-collapse")}} 的值为 <code>collapse</code> 时，<code>border-radius</code> 属性不会被应用到表格（</p>）元素上。<table> + + + + + + + + + + + + + + + + + + + + +</table> + + + <em>radius</em> + <img alt="all-corner.png" class="default internal" src="https://developer.mozilla.org/@api/deki/files/6138/=all-corner.png"> + 可以是 {{ cssxref("<length>") }} 或者 {{cssxref("<percentage>")}}，表示边框四角的圆角半径。只在单值语法中使用。 + + + <em>top-left-and-bottom-right</em> + <img alt="top-left-bottom-right.png" class="default internal" src="https://developer.mozilla.org/@api/deki/files/6141/=top-left-bottom-right.png"> + 可以是 {{ cssxref("<length>") }} 或者 {{cssxref("<percentage>")}}，表示边框左上角和右下角的圆角半径。只在双值语法中使用。 + + + <em>top-right-and-bottom-left</em> + <img alt="top-right-bottom-left.png" class="default internal" src="https://developer.mozilla.org/@api/deki/files/6143/=top-right-bottom-left.png"> + 可以是 {{ cssxref("<length>") }} 或者 {{cssxref("<percentage>")}}，表示边框右上角和左下角的圆角半径。只在双值或三值语法中使用。 + + + <em>top-left</em> + <img alt="top-left.png" class="default internal" src="https://developer.mozilla.org/@api/deki/files/6142/=top-left.png"> + 可以是 {{ cssxref("<length>") }} 或者 {{cssxref("<percentage>")}}，表示边框左上角的圆角半径。只在三值或四值语法中使用。 + + + <em>top-right</em> + <img alt="top-right.png" class="default internal" src="https://developer.mozilla.org/@api/deki/files/6144/=top-right.png"> + 可以是 {{ cssxref("<length>") }} 或者 {{cssxref("<percentage>")}}，表示边框右上角的圆角半径。只在四值语法中使用。 + + + <em>bottom-right</em> + <img alt="bottom-rigth.png" class="default internal" src="https://developer.mozilla.org/@api/deki/files/6140/=bottom-rigth.png"> + 可以是 {{ cssxref("<length>") }} 或者 {{cssxref("<percentage>")}}，表示边框右下角的圆角半径。只在三值或四值语法中使用。 + + + <em>bottom-left</em> + <img alt="bottom-left.png" class="default internal" src="https://developer.mozilla.org/@api/deki/files/6139/=bottom-left.png"> + 可以是 {{ cssxref("<length>") }} 或者 {{cssxref("<percentage>")}}，表示边框左下角的圆角半径。只在四值语法中使用。 + + + <code>inherit</code> + + 表示四个值都从父元素计算值继承。 + + + + +<dl> + <dt><a id="<length>" name="<length>">{{cssxref("<length>")}}</a></dt> + <dd>{{ cssxref("<length>") }} 定义圆形半径或椭圆的半长轴，半短轴。负值无效。</dd> + <dt><a id="<percentage>" name="<percentage>">{{cssxref("<percentage>")}}</a></dt> + <dd>使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。负值无效。</dd> +</dl> + +<p>例如:</p> + +<pre class="brush: css">border-radius: 1em/5em; + +/* 等价于： */ + +border-top-left-radius: 1em 5em; +border-top-right-radius: 1em 5em; +border-bottom-right-radius: 1em 5em; +border-bottom-left-radius: 1em 5em; +</pre> + +<pre class="brush: css">border-radius: 4px 3px 6px / 2px 4px; + +/* 等价于： */ + +border-top-left-radius: 4px 2px; +border-top-right-radius: 3px 4px; +border-bottom-right-radius: 6px 2px; +border-bottom-left-radius: 3px 4px; +</pre> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="示例">示例</h2> + +<pre style="display: inline-block; margin: 10px; border: solid 10px; border-radius: 10px 40px 40px 10px;"> border: solid 10px; + /* the border will curve into a 'D' */ + border-radius: 10px 40px 40px 10px; +</pre> + +<pre style="display: inline-block; margin: 10px; border: groove 1em red; border-radius: 2em;"> border: groove 1em red; + border-radius: 2em; +</pre> + +<pre style="display: inline-block; margin: 10px; background: gold; border: ridge gold; border-radius: 13em/3em;"> background: gold; + border: ridge gold; + border-radius: 13em/3em; +</pre> + +<pre style="display: inline-block; margin: 10px; background: gold; border: none; border-radius: 40px 10px;"> border: none; + border-radius: 40px 10px; +</pre> + +<pre style="display: inline-block; margin: 10px; background: black; color: white; border: none; border-radius: 50%;"> border: none; + border-radius: 50%; +</pre> + +<h2 id="在线示例">在线示例</h2> + +<p>示例 1 : <a href="http://jsfiddle.net/Tripad/qnGKj/2/">http://jsfiddle.net/Tripad/qnGKj/2/</a></p> + +<p>示例 2 : <a href="http://jsfiddle.net/Tripad/qnGKj/3/">http://jsfiddle.net/Tripad/qnGKj/3/</a></p> + +<p>示例 3 : <a href="http://jsfiddle.net/Tripad/qnGKj/4/">http://jsfiddle.net/Tripad/qnGKj/4/</a></p> + +<p>示例 4 : <a href="http://jsfiddle.net/Tripad/qnGKj/5/">http://jsfiddle.net/Tripad/qnGKj/5/</a></p> + +<p>示例 5 : <a href="http://jsfiddle.net/Tripad/qnGKj/6/">http://jsfiddle.net/Tripad/qnGKj/6/</a></p> + +<h2 id="注意">注意</h2> + +<ul> + <li>在 Gecko 中，点状和虚线状圆角边框被渲染为了实线 {{ bug("382721") }}.</li> + <li>当表格元素的 {{ Cssxref("border-collapse") }} 为 <code>collapse</code> 时 <code style="font-style: normal; font-size: 13.63636302948px; line-height: 19.0909080505371px;">border-radius</code><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;"> 不会生效。</span></li> + <li>旧版本 WebKit 对于多重值有不同的处理方式，见下。</li> +</ul> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("css.properties.border-radius")}}</p> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatGeckoDesktop("2.0") }}<br> + {{ CompatGeckoDesktop("1.0") }}{{ property_prefix("-moz") }}</td> + <td>4.0<br> + 0.2{{ property_prefix("-webkit") }}</td> + <td>9.0</td> + <td>10.5</td> + <td>5.0<br> + 3.0{{ property_prefix("-webkit") }}</td> + </tr> + <tr> + <td>Elliptical borders</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>yes</td> + <td>yes</td> + <td>yes</td> + <td>yes, but see below</td> + </tr> + <tr> + <td>4 values for 4 corners</td> + <td>yes</td> + <td>4.0</td> + <td>yes</td> + <td>yes</td> + <td>5.0</td> + </tr> + <tr> + <td>Percentages</td> + <td>yes<br> + was {{ non-standard_inline() }} (see below)</td> + <td>yes</td> + <td>yes</td> + <td>11.5</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>iOS Safari</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Android Browser</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.2{{ property_prefix("-webkit") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>2.1{{ property_prefix("-webkit") }}</td> + </tr> + <tr> + <td>Elliptical borders</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>4 values for 4 corners</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Percentages</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="<percentage>_值"><code><percentage></code> 值</h3> + +<ul> + <li>在旧版本的 Chrome 和 Safari 中不支持。(<a class="external" href="http://trac.webkit.org/changeset/66615">fixed in Sepember 2010</a>)</li> + <li>在 11.50 版本以前的 Opera 中实现有问题。</li> + <li>Gecko 2.0 (Firefox 4) 版本前实现不标准：水平半轴和垂直半轴<strong>都</strong>相对于盒子模型的宽度。</li> + <li>在旧版本的 iOS (iOS 5 之前) 和 Android 中 (WebKit 532 之前) 不支持。</li> +</ul> + +<h3 id="Gecko_notes">Gecko notes</h3> + +<p>In Gecko 2.0 <code>-moz-border-radius</code> was renamed to <code>border-radius</code>; <code>-moz-border-radius</code> was supported as an alias until Gecko 12.0. In order to conform to the CSS3 standard, Gecko 2.0</p> + +<ul> + <li>changes the handling of {{cssxref("<percentage>")}} values to match the specification. You can specify an ellipse as border on an arbitrary sized element just with <code>border-radius: 50%;</code></li> + <li>makes rounded corners clip content and images (if {{ cssxref("overflow") }}<code>: visible</code> is not set)</li> +</ul> + +<div class="note"><strong>Note:</strong> Support for the prefixed version (<code>-moz-border-radius</code>) was removed in Gecko 13.0 {{ geckoRelease("13.0") }}.</div> + +<h3 id="WebKit_notes">WebKit notes</h3> + +<p>旧版本的 Safari 和 Chrome (532.5 之前)</p> + +<ul> + <li>只支持<strong>单值</strong>设定四个角。必须使用<a href="/en/CSS/border-top-left-radius#Examples" style="text-decoration: underline;" title="en/CSS/border-top-left-radius#Examples">完整值</a>来设置不同角。 </li> + <li>不支持斜杠 / 符号，如果指定了两个值，那么四个角都为椭圆角. + <pre>/* 它们是等价的 */ + +-webkit-border-radius: 40px 10px; + border-radius: 40px/10px; +</pre> + </li> +</ul> + +<h3 id="Opera_notes">Opera notes</h3> + +<p>In Opera (prior to Opera 11.60), applying <code>border-radius</code> to replaced elements will not have rounded corners.</p> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li>与 border-radius 相关的 CSS 属性：{{Cssxref("border-top-left-radius")}}, {{Cssxref("border-top-right-radius")}}, {{Cssxref("border-bottom-right-radius")}}, {{Cssxref("border-bottom-left-radius")}}</li> +</ul> |