Tutorial sobre el uso de la propiedad box-shadow de CSS3

Autor：Eve Cole Fecha de actualización：2010-05-14 17:29:27

La propiedad box-shadow de CSS3 nos permite lograr fácilmente efectos de sombra de capa. Expliquemos este atributo en detalle en la práctica.

1. Compatibilidad del navegador con el atributo box-shadow

Primero veamos la compatibilidad del navegador de este atributo:

Opera: No sé qué versión empezó a admitir. Cuando publiqué este artículo para probarlo, actualicé Opera a la última versión 10.53, que ya admite el atributo box-shadow.
Firefox admite esto a través de la propiedad privada -moz-box-shadow .
Safari y Chrome admiten esto a través de la propiedad privada -webkit-box-shadow .
No es compatible con todos los IE (no sé si IE9 ha mejorado). No te preocupes, presentaremos algunos trucos para IE al final del artículo.

box-shadow tiene seis valores configurables:

img{box-shadow: Tipo de sombra Desplazamiento del eje X Desplazamiento del eje Y Tamaño de la sombra Extensión de la sombra Color de la sombra}

Cuando no se establece ningún tipo de sombra, el valor predeterminado es el efecto de sombra. Cuando se establece en inserción, es un efecto de sombra interior.
El desplazamiento del eje X y del eje Y no son equivalentes, pero son similares a "ángulo" y "posición" en Photoshop.
El tamaño, la extensión y el color de las sombras son los mismos que en Photoshop.
3. Análisis de ejemplo
Veamos el efecto de una sombra de cuadro a través de varios ejemplos. Primero, cree un html simple para probar:
<html>
<cabeza>
<style type="text/css">Escribe la parte CSS aquí</style>
</cabeza>
<cuerpo>
<img src="prueba.jpg" />
</cuerpo>
</html>
Tenga en cuenta : para evitar problemas, solo box-shadow está escrito en el código CSS a continuación. En uso real, también debe escribir -moz-box-shadow y -webkit-shadow. Lo que debes hacer es muy simple: copiar dos sombras de cuadro y agregar -moz- y -webkit- delante de ellas.
img { -moz-box-shadow:2px 2px 10px #06C; -webkit-box-shadow:2px 2px 10px #06C; box-shadow:2px 2px 10px #06C; }