Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.
Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
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.
Em aplicações Mozilla como o Firefox, a propriedade CSS -moz-border-bottom-colors
define uma lista de cores para a borda inferior.
/* Valor unico <color> */ -moz-border-bottom-colors: #00E676; /* Multiplos valores <color> */ -moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000; /* Valores globais */ -moz-border-bottom-colors: inherit; -moz-border-bottom-colors: initial; -moz-border-bottom-colors: unset;
Quando um elemento tem a borda maior do que um único pixel do CSS, cada linha de pixel usa a próxima cor especificada em sua propriedade, de fora para dentro. Isso elimina a necessidade de caixas aninhadas. Se a borda for mais larga que o número de cores especificadas, a parte restante da borda é a cor especificada mais próxima.
Initial value | none |
---|---|
Aplica-se a | all elements |
Inherited | não |
Midia | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Não se aplica
- se
border-style
édashed
oudotted
. - a tabelas com
border-collapse: collapse
.
Sintaxe
Valores
Aceita uma lista de valores de cores separados por espaços em branco.
- <color>
- Especifica a cor de uma linha de pixels da borda inferior.
transparent
é válido. Veja os valores de<color>
para possíveis unidades. - none
- Padrão, nenhuma cor é desenhada ou o
border-color
é usado, se for especificado.
Sintaxe formal
<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>
Exemplo
<div id="exemplo">Exemplo</div>
#exemplo { padding: 20px; background-color: pink; 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; }
Especificações
Essa propriedade não é parte de nenhuma especificação.
Compatibilidade de navegador
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome No support No | Edge No support No | Firefox
No support
1 — 59
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Edge Mobile No support No | Firefox Android
No support
4 — 59
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- No support
- No support
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- See implementation notes.
- See implementation notes.