-moz-outline-radius

在此页

组成特性
句法
形式定义
形式句法
范例
注意事项
规范
浏览器兼容性
另请参阅
相关话题

非标
此特征是非标准的，且不在标准轨道中。不要在面向 Web 的生产站点中使用它：它不适用于每个用户。实现之间可能存在大的不兼容性，且行为将来可能改变。

In Mozilla applications like Firefox, the -moz-outline-radius CSS shorthand property can be used to give an element's outline rounded corners.

/* One value */
-moz-outline-radius: 25px;
/* Two values */
-moz-outline-radius: 25px 1em;
/* Three values */
-moz-outline-radius: 25px 1em 12%;
/* Four values */
-moz-outline-radius: 25px 1em 12% 4mm;
/* Global values */
-moz-outline-radius: inherit;
-moz-outline-radius: initial;
-moz-outline-radius: unset;

组成特性

此特性是下列 CSS 特性的简写：

句法

值

Elliptical outlines and


<percentage>

values follow the syntax described in


border-radius

One, two, three or four <outline-radius> values, represents one of:

<length>: 见 <length> for possible values.
<percentage>: A <percentage> ; see border-radius 了解细节。

If a single value is set, it applies to all 4 corners.
If two values are set, the first one applies to the top-left and bottom-right corners and the second one to the top-right and bottom-left corners.
If three values are set, the first one applies to the top-Left corner, the second one to the top-right and bottom-left corners and the third one to the bottom-right corner.
If four values are set, the first one applies to the top-left corner, the second one to the top-right corner, the third one to the bottom-right corner and the fourth one to the bottom-left corner.

形式定义

初始值	as each of the properties of the shorthand: `-moz-outline-radius-topleft` : `0` `-moz-outline-radius-topright` : `0` `-moz-outline-radius-bottomright` : `0` `-moz-outline-radius-bottomleft` : `0`
适用于	所有元素
继承	no
百分比	as each of the properties of the shorthand: `-moz-outline-radius-topleft` : refer to the corresponding dimension of the border box `-moz-outline-radius-topright` : refer to the corresponding dimension of the border box `-moz-outline-radius-bottomright` : refer to the corresponding dimension of the border box `-moz-outline-radius-bottomleft` : refer to the corresponding dimension of the border box
计算值	as each of the properties of the shorthand: `-moz-outline-radius-topleft` ：如指定 `-moz-outline-radius-topright` ：如指定 `-moz-outline-radius-bottomright` ：如指定 `-moz-outline-radius-bottomleft` ：如指定
动画类型	as each of the properties of the shorthand: `-moz-outline-radius-topleft` : a length , percentage or calc(); `-moz-outline-radius-topright` : a length , percentage or calc(); `-moz-outline-radius-bottomright` : a length , percentage or calc(); `-moz-outline-radius-bottomleft` : a length , percentage or calc();

形式句法

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

范例

Rounding an outline

Note: This example will not display the desired effect if you are viewing this in a browser other than Firefox.

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;
}

结果

注意事项

dotted or dashed radiused corners were rendered as solid until Firefox 50, bug 382721
Future versions of Gecko/Firefox may drop this property completely. See bug 593717 .

规范

Not part of any standard.

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`-moz-outline-radius` 弃用非标	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 1	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 4	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持
不支持
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。

另请参阅

Mozilla CSS 扩展
Related CSS properties:
- outline

元数据

最后修改： Aug 10, 2020

在此页