此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

-moz-outline-radius

非标准: 该特性是非标准的，请尽量不要在生产环境中使用它！

在包括Firefox在内的Mozilla的应用里， -moz-outline-radius CSS 属性可以用作给一个元素 outline 圆角。

/* 一个值 */
-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;

这个属性是以下四个属性的简写：-moz-outline-radius-topleft、 -moz-outline-radius-topright、 -moz-outline-radius-bottomright 和 -moz-outline-radius-bottomleft。

初始值as each of the properties of the shorthand:
适用元素all elements
是否是继承属性否
Percentagesas each of the properties of the shorthand:
计算值as each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

语法

值

省略的 outlines 和 <percentage> 的值与 border-radius中描述的语法一致。

一个、两个、三个或四个 <outline-radius> 的值，代表着以下数值之一：

<length>
可能的值请参考 <length> 。
<percentage>
一个 <percentage>；详情请参考 border-radius 。
  • 如果仅有一个值，这个值应用到全部四个角。
  • 如果设置了两个值，第一个值应用于左上角个右下角，第二个值应用于右上角和左下角。
  • 如果设置了三个值，第一个值应用于左上角，第二个值应用于右上角个左下角，第三个值应用于右下角。
  • 如果设置了四个值，第一个值应用于左上角，第二个值应用于右上角，第三个值应用于右下角，第四个值应用于左下角。

正式语法

<outline-radius>{1,4} [ / <outline-radius>{1,4} ]?
where 
<outline-radius> = <length> | <percentage>

示例

HTML

<p>This element has a rounded outline!</p>

CSS

p {
  margin: 5px;
  border: 1px solid black;
  outline: dotted red;
  -moz-outline-radius: 12% 1em 25px;
}

结果

备注

  • 直至 Firefox 50之前，dotted 或 dashed 圆角被渲染为 solid ，详见 bug 382721
  • 未来的Gecko/Firefox版本可能完全弃用这个属性。详见 bug 593717.

规范

这个属性没有在任何CSS标准中被定义。

浏览器兼容性

BCD tables only load in the browser