Índice

Sombras sobre un elemento caja

box-shadow

x y z color donde

  • x es el margen de la sombra hacia la derecha.

  • y es el margen de la sombra hacia abajo.

  • z es la intensidad de degradado o de desenfocado (es opcional, con valor por defecto 0).

  • color es el color de la sombra.

Los parámetros x e y admiten valores negativos. El margen de la sombra se desplaza en este caso hacia la izquierda y hacia arriba.

Observe que la propiedad se aplica sobre la caja del elemento y no sobre su borde. El sombreado no afecta, por tanto, al tamaño de la caja del elemento.

La propiedad box-shadow está implementada por:

  • Internet Explore 10 sin prefijo.

  • Firefox 3.6+ con el prefijo -moz-, desde Firefox 4.0+ sin prefijo.

  • Chrome 4.0+ con el prefijo -webkit-, desde Chrome 10.0+ sin prefijo.

  • Safari 3.1+ con el prefijo -webkit-, desde Safari 5.1+ sin prefijo.

  • Opera 10.5 sin prefijo.

  • iOS Safari 3.2+ con el prefijo -webkit-, desde la versión 5.0+ sin prefijo.

  • Android Browser 2.1+ con el prefijo -webkit-, desde la versión 4.0+ sin prefijo.

Para Internet Explorer 9, es preciso utilizar el filtro propietario de Microsoft Shadow. Para conseguir un efecto de sombra compatible hay que agregar, por ejemplo, el código: 

.sombreado { filter:progid:DXImageTransform.Microsoft.Shadow(color=’#aaaaaa’, 
Direction=135, Strength=12);}

Ejemplo

<!DOCTYPE html>  
<html lang="es">  
<head>  
<title>Html5</title>  
<meta charset="UTF-8">   
<style type="text/css">   ...