As diversas propriedades em CSS3

Maio 2017




Muitas novas características são inventadas para o CSS3 ; eu vou apresentar essas novas propriedades.
Atenção, o Internet Explorer (otimizado pelo CCM) só interpreta o CSS3 a partir da sua Versão 9.

Aqui, eu vou utilizar o prefixo -moz- para o "Mozilla Firefox"

Bordas


O W3C permite realizar novas ações sobre as margens:

Bordas com cor derretida


Com a propriedade -moz-border-colors: você pode, portanto, criar bordas de várias cores (para fazer um degradê, por exemplo).

A propriedade também pode ser usada assim: -moz-borders-top-color: (que borda adicionar, que top, que bottom, esquerda, direita)

#mondiv {    
border:8px solid #000000;        
-moz-border-colors : #CC0000 #BB0000 #AA0000 #990000 #880000 #770000 #660000 #550000;        
padding: 5px ;        
}        


Em imagem:

Bordas com imagens


Com o CSS3, é possível, graças a uma imagem, fazer um corte pré-definido na propriedade escolhida.

As duas propriedades:

border-image :
border-top-image
border-right-image
border-bottom-image
border-left-image


border-corner-image :
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image


#mon-div {  
border-image: url(border.png) 27 27 27 27 round round;  
}  


Em imagem:


  
#mon_div {  
border-image: url(border.png) 27 27 27 27 stretch stretch;  
} 


Arredondar o canto das bordas


A propriedade CSS3 border-radius permite que os desenvolvedores da Web utilizem, com facilidade, cantos arredondados em seus elementos de design, sem precisar de imagens de canto ou de utilizar balizas div múltiplas e, talvez, um dos aspectos mais comentados da CSS3.


#conteúdo{ 
-moz-border-radius: 15px; /* Prefixo Moz para Mozilla  (não válido W3C)*/ 
border-radius: 15px; /* Nenhum prefixo para os navegadores que incluem a propriedade sem prefixo (valide W3C) */ 
}  


Source (En)

Article en cours d 'édition


Veja também

Artigo original publicado por . Tradução feita por pintuda. Última modificação: 1 de outubro de 2010 às 07:21 por pintuda.
Este documento, intitulado 'As diversas propriedades em CSS3', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.