Box-Shadow: Diseño web con CSS 3 - Bordes sombreados

Ahora veremos la propiedad Box-Shadow que nos permite agregar una sombra, la implementación CSS 3 solamente la soporta Opera, en Firefox, Safari y Chrome requeriremos anteponer -moz- y -webkit- a box-shadow.

En la etiqueta DIV en el atributo Style agregamos:

style="
box-shadow: -8px -5px 0px #000;
-moz-box-shadow: -8px -5px 0px #000;
-webkit-box-shadow: -8px -5px 0px #000;
"

El resultado será el siguiente:

-2
-
-
-
-1       3
-
-
4

Los valores se ordenan de forma horizontal (+ y -) y vertica (+ y -) donde:

Los valores negativos representan por orden de aparición:

Style="lado izquierdo (-1) y lado superior (-2)"

Si por el contrario usaramos valores positivos:

style="
box-shadow: 8px 5px 0px #000;
-moz-box-shadow: 8px 5px 0px #000;
-webkit-box-shadow:  8px 5px 0px #000;
"

-2
-
-
-
-1       3
-
-
4

El orden de aparición sería

style="lado derecho(3) y lado inferior (4)"

-2
-
-
-
-1       3
-
-
4

Ahora si revolvemos negativos y positivos:
box-shadow: -8px 5px;

-2
-
-
-
-1       3
-
-
4

Usando box-shadow: 8px -5px;

-2
-
-
-
-1       3
-
-
4

Difuminado
Lo que falta es ver el último valor que controla el difuminado, esto es, que luego del ancho de la sombra dura, el difuminado empieza y se determina en pixeles. Para este ejemplo usaremos de valor 20 pixeles.

style="
box-shadow: 8px 5px 20px #000;
-moz-box-shadow: -8px -5px 20px #000;
-webkit-box-shadow: -8px -5px 20px #000;
"

-2
-
-
-
-1       3
-
-
4

Color 
Además de todo esto al final de la sentencia debe ir el color en Hexadecimal (#color) o RGB [rgb (254,254,254) ] esto afectará al filete y el degradado, en este caso usaremos el color #FF2B80 que en RGB se puede representar como rgb(255, 43, 128)

style="
box-shadow: 8px 5px 20px #FF2B80;
-moz-box-shadow: -8px -5px 20px #FF2B80;
-webkit-box-shadow: -8px -5px 20px #FF2B80;"

o

style="
box-shadow: 8px 5px 20px rgb(255, 43, 128);
-moz-box-shadow: -8px -5px 20px rgb(255, 43, 128);
-webkit-box-shadow: -8px -5px 20px rgb(255, 43, 128);
"

-2
-
-
-
-1       3
-
-
4

Simple ¿no?
Si queremos agregar más de una sombra con direfnte color, tenemos que agregar una coma entre cada instrucción, por ejemplo:

-moz-box-shadow: -8px -5px 20px rgb(255, 43, 128), 8px 5px 20px rgb(102, 153, 255);

-2
-
-
-
-1       3
-
-
4

Aclaraciones de uso
border-radius - Nombre del estándar bajo CSS (De momento solamente Opera)
-moz-border-radius - Navegadores bajo el motor de Mozilla (Firefox)
-webkit-border-radius - Navegadores bajo Webkit (Safari y Chrome)

Internet Explorer no soporta ninguna instrucción, a partir de Internet Explorer 9 se implementará.