-moz-border-bottom-colors
非标准
该特性是非标准的,请尽量不要在生产环境中使用它!
在Mozilla Firefox中, the -moz-border-bottom-colors
CSS 属性的作用是给元素添加下边框的颜色。
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 |
---|---|
适用元素 | all elements |
是否是继承属性 | 否 |
适用媒体 | visual |
计算值 | as specified |
Animation type | discrete |
正规顺序 | the unique non-ambiguous order defined by the formal grammar |
It does not apply
- if
border-style
isdashed
ordotted
. - to tables with
border-collapse: collapse
.
Syntax
/* Single <color> value */
-moz-border-bottom-colors: #f0f0f0;
/* Multiple <color> values */
-moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000;
/* Global values */
-moz-border-bottom-colors: inherit;
-moz-border-bottom-colors: initial;
-moz-border-bottom-colors: unset;
Values(属性值)
Accepts a white-space separated list of color values.
- <颜色>
- Specifies the color of a line of pixels of the bottom border.
transparent
is valid. See<color>
values for possible units. - none
- Default, no colors are drawn or
border-color
is used, if specified.
Formal syntax
<color>+ | nonewhere
<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>
Example
<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;
}
Specifications
This property is not part of any specification.
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 未实现 | 1.0 (1.7 or earlier) | 未实现 | 未实现 | 未实现 |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 未实现 | 未实现 | ? | 未实现 | 未实现 | 未实现 |