Shadow effect for images using CSS

I think many of you are faced with the task of creating a double / custom frame for the images on the site. I partially described the technique of creating such a framework here . But I did not mention (and to be honest, I myself didn’t even think about it then) in that article one interesting nuance.
With this technique, you can create a shadow effect for a picture, literally a couple of lines. What should be done?
To begin, let me remind you that to create a double / non-standard frame for images, you need to set an indent width of 1px for the image and set it either for the border with color and thickness parameters, or put the image in a container and set the indent and background image for the container.
In this case, everything is easier. You need to set the padding and border for the image with only two sides, instead of four and the background. For example, like this:

  .shadow {
 border-bottom: 2px solid #eee;
 border-right: 2px solid #eee;
 padding-bottom: 2px;
 padding-right: 2px;
 background: #cc;
 } 

Here is an example:

Not sure what it looks like on a picture with a white background, but still :)
With no less success, you can do this by setting the background image and playing with its positioning.
Naturally, it is possible and necessary to experiment in order to achieve the desired effect, but the essence is clear.
PS In Quircks Mode in Internet Explorer 6, padding for img will not work, but if you still work in Quircks Mode, then these are your problems :)