Artigos HTML e CSS Utilizando CSS3 nas versões antigas do Internet Explorer
Hoje um dos maiores empecilhos para os desenvolvedores web são as incompatibilidades entre browsers, principalmente o IE (sempre ele!).
As versões 6 ,7 e  8 do Internet Explorer não são capazes de renderizar as propriedades do CSS3, mas não desanime!
Existem bibliotecas javascript e hacks que nos permite utilizar algumas propriedades CSS3 nos navegadores citados acima, tais implementações também são renderizadas nos demais navegadores: Firefox, Chrome, Opera e Safari.
Para tal, utilizaremos o PIE CSS3 http://css3pie.com

Propriedades suportadas:

border-radius
box-shadow
border-image
CSS3 Backgrounds (- pie-background)
Gradients
RGBA Color Values
PIE Custom Properties
-pie-watch-ancestors
PNG alpha transparency and -pie-png-fix
Lazy Initialization (-pie-lazy-init)

Bordas Arredondadas
A propriedade para criar bordar arredondadas é o border-radius e atribuir um valor para o arredondamento. Porém, essa propriedade varia entre browsers.
Veremos agora como utilizar na prática:

 


#box{
    border-radius: 10px; /* Implementação padrão W3C */
    -moz-border-radius: 10px; /* Implementação Firefox */
    -webkit-border-radius: 10px; /* ISafari e browsers que renderizam via webkit */
    behavior: url(PIE.htc); /* Bahavior adicionado para renderização das propriedades acima no IE6, 7 e 8 */
    width: 200px;
    height: 50px;
    background: red;
}


Pronto! A borda será renderizada como na imagem abaixo (utilize o programa IE Tester para testar nas diferentes versões do IE).



Sombras
A propriedade box-shadow define sombra em um elemento. Requer valores para definir a separação da sombra, esfumaçado, cor.
Por exemplo: box-shadow: 5px -9px 8px #666, onde o primeiro valor define a posição em X, o segundo em Y, depois o valor do “blur” e por último a cor. Por enquanto o PIE CSS3 não aceita usar inset e outset para mudar a sombra para interna ou externa.

 

#boxsombra{
    box-shadow: 5px -9px 8px #666; /* Implementação W3C */
    -moz-box-shadow: 5px 3px 8px #666;  /* Implementação Firefox */
    -webkit-box-shadow:5px 3px 8px #666; ; /* Safari e browsers que renderizam via webkit */
    behavior: url(PIE.htc); /* Bahavior adicionado para renderização das propriedades acima no IE6, 7 e 8 */
    width: 200px;
    height: 50px;
    background: orange;
}




Linear Gradiente
Define efeito de degradê, basta inserir a propriedade dentro de background e declarar os devidos valores.
background: linear- gradient(cor1,cor2), em alguns browsers que usam webkit fica assim background: linear-gradient{posição, cor (from), cor(to) porcentagem};



#boxdegrade
{
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));/* Safari e browsers que renderizam via webkit */
    background: -webkit-linear-gradient(#EEFF99, #66EE33);/* Safari e browsers que renderizam via webkit */
    background: -moz-linear-gradient(#EEFF99, #66EE33); /* Implementação Firefox */
    background: -o-linear-gradient(#EEFF99, #66EE33); /* Implementação Opera */
    background: linear-gradient(#EEFF99, #66EE33); /* Implementação padrão W3C */
    -pie-background: linear-gradient(#EEFF99, #66EE33); /* Propriedade adicionada para renderização das propriedades no IE7 ou superior */
    width: 200px;
    height: 50px;
    behavior: url(PIE.htc); /* Behavior adicionado para renderização das propriedades acima no IE6, 7 e 8 */
}



Para mais exemplos visite o site http://css3pie.com
OBS: o arquivo PIE.htc tem que estar no mesmo diretório que o arquivo .css