在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

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

Obsolete since Gecko 59 (Firefox 59 / Thunderbird 59 / SeaMonkey 2.56)
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

In Mozilla applications like Firefox, the -moz-border-top-colors CSS property sets a list of colors for the top border.

/* Single <color> value */
-moz-border-top-colors: #f0f0f0;
/* Multiple <color> values */
-moz-border-top-colors: #f0f0f0 #a0a0a0 #505050 #000000;
/* Global values */
-moz-border-top-colors: inherit;
-moz-border-top-colors: initial;
-moz-border-top-colors: unset;
					

When an element has a border that is larger than a single CSS pixel, each line of pixels uses the next color specified in this property, from the outside in. This eliminates the need for nested boxes. If the border is wider than the number of specified colors, the remaining part of the border is the innermost color specified.

初始值	none
适用于	所有元素
继承	no
计算值	如指定
动画类型	discrete

It does not apply

1. if border-style is dashed or dotted .
2. to tables with border-collapse: collapse .

句法

值

Accepts a white-space separated list of color values.

<color>

Specifies the color of a line of pixels of the top border. transparent is valid. See <color> values for possible units.

none

Default, no colors are drawn or border-color is used, if specified.

形式句法

<color>+ | none
where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
					

范例

<div id="example">Example</div>
					

#example {
  padding: 20px;
  background-color: gray;
  border: 10px solid black;
  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
}
					

规范

This property is not part of any specification.

浏览器兼容性

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.

No compatibility data found. Please contribute data for "css.properties.-moz-border-top-colors" (depth: 1) to the MDN 兼容性数据存储库 .

另请参阅

• border-color
• -moz-border-right-colors
• -moz-border-bottom-colors
• -moz-border-left-colors

元数据

• 最后修改： Jul 21, 2020

相关话题

1. CSS
2. CSS 参考