--- title: '-moz-outline-radius' slug: Web/CSS/-moz-outline-radius tags: - CSS - CSS属性 - CSS:Mozilla扩展 - 非标准 translation_of: Web/CSS/-moz-outline-radius --- <div>{{CSSRef}}{{Non-standard_Header}}</div> <p>在包括Firefox在内的Mozilla的应用里, <strong><code>-moz-outline-radius</code></strong> <a href="/zh-CN/docs/Web/CSS">CSS</a> 属性可以用作给一个元素 {{cssxref("outline")}} 圆角。</p> <pre class="brush:css">/* 一个值 */ -moz-outline-radius: 25px; /* 两个值 */ -moz-outline-radius: 25px 1em; /* 三个值 */ -moz-outline-radius: 25px 1em 12%; /* 四个值 */ -moz-outline-radius: 25px 1em 12% 4mm; /* 全局值 */ -moz-outline-radius: inherit; -moz-outline-radius: initial; -moz-outline-radius: unset; </pre> <p>这个属性是以下四个属性的简写:{{cssxref("-moz-outline-radius-topleft")}}、 {{cssxref("-moz-outline-radius-topright")}}、 {{cssxref("-moz-outline-radius-bottomright")}} 和 {{cssxref("-moz-outline-radius-bottomleft")}}。</p> <p>{{cssinfo}}</p> <h2 id="语法">语法</h2> <h3 id="值">值</h3> <div class="note">省略的 outlines 和 <code><percentage></code> 的值与 {{cssxref("border-radius")}}中描述的语法一致。</div> <p>一个、两个、三个或四个 <code><outline-radius></code> 的值,代表着以下数值之一:</p> <dl> <dt>{{cssxref("<length>")}}</dt> <dd>可能的值请参考 {{cssxref("<length>")}} 。</dd> <dt>{{cssxref("<percentage>")}}</dt> <dd>一个 {{cssxref("<percentage>")}};详情请参考 {{cssxref("border-radius")}} 。</dd> </dl> <ul> <li>如果仅有一个值,这个值应用到全部四个角。</li> <li>如果设置了两个值,第一个值应用于左上角个右下角,第二个值应用于右上角和左下角。</li> <li>如果设置了三个值,第一个值应用于左上角,第二个值应用于右上角个左下角,第三个值应用于右下角。</li> <li>如果设置了四个值,第一个值应用于左上角,第二个值应用于右上角,第三个值应用于右下角,第四个值应用于左下角。</li> </ul> <h3 id="正式语法">正式语法</h3> {{csssyntax}} <h2 id="示例">示例</h2> <h3 id="HTML">HTML</h3> <pre class="brush: html"><p>This element has a rounded outline!</p></pre> <h3 id="CSS">CSS</h3> <pre class="brush: css">p { margin: 5px; border: 1px solid black; outline: dotted red; -moz-outline-radius: 12% 1em 25px; }</pre> <h3 id="结果">结果</h3> <p>{{EmbedLiveSample('Example')}}</p> <h2 id="备注">备注</h2> <ul> <li>直至 Firefox 50之前,<code>dotted</code> 或 <code>dashed</code> 圆角被渲染为 solid ,详见 {{bug("382721")}}</li> <li>未来的Gecko/Firefox版本可能完全弃用这个属性。详见 {{bug("593717")}}.</li> </ul> <h2 id="规范">规范</h2> <p>这个属性没有在任何CSS标准中被定义。</p> <h2 id="浏览器兼容性">浏览器兼容性</h2> <p>{{Compat("css.properties.-moz-outline-radius")}}</p>