Una introducción a la adición de sombras a imágenes usando CSS

Generalmente, podemos usar una imagen de fondo para agregar sombras a las imágenes, pero ¿cómo lograr esto para imágenes con tamaños no fijos?

Podemos utilizar el "método de engaño visual" para lograr esto definiendo un borde degradado

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">





cuerpo {fondo:#2e334d;}
img {borde:ninguno;}
a.pic-shadow {display:inline-block;zoom:1;padding:1px;background:#262a3f;border:solid #2b3048 1px;border-radius:5px;-moz-border-radius:5px;-webkit- radio de borde: 5px;}
a.pic-shadow img {padding:1px;background:#13151f;border:solid #1e2132 1px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}



" alt="" title="" />

border-radius:5px;
-moz-border-radio:5px;
-webkit-border-radius:5px;

La definición anterior es la definición de esquinas redondeadas en varios navegadores estándar para engañar a los ojos de manera más profesional.

El código de color se puede seleccionar después de crear el efecto de brillo exterior en PS.
Los efectos que tengo arriba son [Suave], [Extendido 0], [Tamaño 5px], [Color #000] y el resto son predeterminados.

Por supuesto, si tiene requisitos especiales, puede usar filtros IE para lograr sombras más hermosas. Si los filtradores pasan por alto... puede ir allí usted mismo.