-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
  • 如果仅有一个值,这个值应用到全部四个角。
  • 如果设置了两个值,第一个值应用于左上角个右下角,第二个值应用于右上角和左下角。
  • 如果设置了三个值,第一个值应用于左上角,第二个值应用于右上角个左下角,第三个值应用于右下角。
  • 如果设置了四个值,第一个值应用于左上角,第二个值应用于右上角,第三个值应用于右下角,第四个值应用于左下角。

正式语法

示例

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