Sombra e cantos arredondados com CSS3

Olá caros leitores,

Vamos falar um pouco de css3, mais especificamente duas coisas que usamos bastante:
sombras e cantos arredondados.

Mas antes de explicar como se faz isso com css3 é bom lembrar da época em que fazer isso era difícil (isso nos ajuda a ter apreço pelas coisas novas que foram feitas para simplificar)

Não tinha jeito, para fazer sombra (de qualidade) com cantos arredondados precisávamos de um software gráfico de apoio. Os cantos e partes da sombra eram imagens que, com a propriedade de background-image, fazia-se uma gambiarra para fazer uma div com cantos arredondados.

Mas isso é coisa do passado.
Vamos às novidades:

Uma div com sombra:

div{
width:200px;
height:200px;
box-shadow: -5px 5px 6px gray;
-webkit-box-shadow: -5px 5px 6px gray;
-moz-box-shadow: -5px 5px 6px gray;
-o-box-shadow: -5px 5px 6px gray;
-ms-box-shadow: -5px 5px 6px gray;
}


renderizando fica assim (Espero que seu browser tenha suporte!):

Agora vamos adicionar os cantos arredondados:

div{
width:200px;
height:200px;
box-shadow: -5px 5px 6px gray;
-webkit-box-shadow: -5px 5px 6px gray;
-moz-box-shadow: -5px 5px 6px gray;
border-radius:7px;
-ms-border-radius:7px;
-o-border-radius:7px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
}


Renderizando:

Talvez você tenha notado os prefixos: -o, -webkit, -moz, -ms
Isso se refere ao tipo de browser

-webkit (browsers baseados em webkit)
-o (opera)
-ms (Microsoft IE)
-moz (mozilla)

É que nem todos interpretarão se você colocar apenas: box-shadow ou border-radius

Bem melhor do que antigamente,
Fica a dica

Gustavo Marques