-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:
适用媒体visual
计算值as each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

省略的 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 315209.

规范

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

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
-moz-outline-radius
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox Full support 1.5IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 4Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.