Atributo gradiente de cores em borda com CSS e Firefox
Investigando um pouco algumas das propriedades novas que vai trazer CSS 3, para completar a informação do artigo Introdução a CSS 3 , me deparei com um atributo para mudar a cor da borda dos elementos da página, que nos permite definir a cor com uma sucessão de distintos valores de cores. Atualmente, com CSS podemos definir separadamente as cores da borda de um elemento, de cima, direita, abaixo e esquerda. Porém, não nos referimos a poder dar uma cor separada para cada parte da borda, e sim, a aplicar várias cores distintas a uma parte, por exemplo, à parte de cima da borda.
Vi esta propriedade comentada em algum lugar como de CSS 3, porém segundo vejo no rascunho da especificação de CSS 3 para bordas e fundos, publicado pelo W3C, não aparece esta nova característica como parte do novo padrão.
Por isso, temos que ressaltar que esta propriedade não é de CSS 3, e sim que se trata de um atributo não padrão de CSS, criado por Mozilla e que, portanto, se pode ver em seu navegador mais conhecido: Firefox. Dito de outra forma, é uma extensão de CSS realizada por Mozilla. Na página de Mozilla podemos encontrar mais informação sobre esta extensão de CSS: https://developer.mozilla.org/en/CSS/-moz-border-bottom-colors
Os atributos aos que nos referimos que permitem definir várias cores para cada uma das partes da borda são os seguintes:
-moz-border-top-colors
-moz-border-right-colors
-moz-border-bottom-colors
-moz-border-left-colors
Em cada um dos atributos se define a cor, podendo especificar uma lista de cores, separadas por espaços, que se aplicarão a cada uma das partes da borda, de dentro para fora. Claro que a borda tem que ter uma largura maior que 1 para que se vejam as distintas cores. Com uma largura de 2 pixel se poderão ver 2 cores diferentes, com uma largura de 3 poderemos definir 3 cores e assim sucessivamente.
O código para criar esse gradiente de cores seria o seguinte:
<style type=”text/css”>
.coresborda{
border-style: solid;
border-width: 10px;
-moz-border-top-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300;
-moz-border-right-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300;
-moz-border-bottom-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300;
-moz-border-left-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300;
}
</style>
É uma pena que seja um atributo unicamente desenvolvido por Mozilla, embora se o suporte a estes atributos se realizar por mais navegadores e se W3C tiver bem, talvez em algum momento se converta em um padrão de CSS.
No momento não passa de uma mera curiosidade e possibilidade de personalização especial para os usuários de Firefox e outros navegadores baseados em Mozilla.
Fonte: http://www.criarweb.com/artigos/atributo-gradiente-cores-borda-css-firefox.html