首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

-moz-border-top-colors

非标准

此功能是非标准的,不处于标准轨道上.。不要在面向Web的生产站点上使用它:它并不适用于每个用户。实现之间也可能存在很大的不兼容性,而且这种行为在未来可能会发生变化。

在火狐等Mozilla应用程序中,-moz-border-top-colors属性为顶部边框设置颜色列表。

代码语言:javascript
复制
/* 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;

当元素的边框大于单个CSS像素时,每行像素都使用此属性中指定的下一个颜色,从外侧开始。这样就不需要嵌套框。如果边框宽于指定颜色的数量,则边框的其余部分是指定的最里面的颜色。

初始值

none

适用元素

all elements

是否是继承属性

no

适用媒体

visual

计算值

as specified

Animation type

discrete

正规顺序

the unique non-ambiguous order defined by the formal grammar

它不适用

  1. 如果border-styledasheddotted
  1. border-collapse: collapse

语法

接受以空格分隔的颜色值列表。

<color>指定顶部边框的一行像素的颜色。transparent已验证。查看<color>可能units.noneDefault的值border-color,如果指定,则不绘制颜色或使用颜色。

正式语法

代码语言:javascript
复制
[ <color> ]* <color> | nonewhere 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where 
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

示例

代码语言:javascript
复制
<div id="example">Example</div>
代码语言:javascript
复制
#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;
}

规范

此属性不属于任何规范的一部分。

浏览器兼容性

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

No support

1.0 (1.7 or earlier)

No support

No support

No support

Feature

Android

Chrome for Android

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

No support

No support

?

No support

No support

No support

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com