Can I use CSS to add shadows to images?

Inserting images on a webpage is not uncommon. However, for the sake of appearance, we need to add shadows to images. When there are a large number of images, the workload is very large. Repetitive work and ineffective. Is there a way to use CSS to add shadows to images?
There is a concept in CSS that everyone should be familiar with, that is, relative positioning position: relative ;. We should learn to use the attributes provided by CSS flexibly. To add a shadow to an image, we can use position: relative; to implement relative positioning. For details about the position attribute, refer to here.
Let's look at the following css code:

The code is as follows:	Copy code
. Waiwei { Position: relative; Background: # eee; Margin: 0 auto; Width: 200px; }  . Tupian { Background: # fff; Border: 1px solid # c00; Padding: 0; Position: relative; Top:-5px; Left:-5px; } . Tupian img { Vertical-align: bottom;/* Remove the gap below the image */ }

We insert an image into XHTML. The following is the XHTML code:

The code is as follows:	Copy code
<Div class = "waiwei"> <Div class = "tupian"> </Div> </Div>

We should be able to understand the CSS and XHTML in this issue, and the principle is also very clear. It is to use relative positioning to stagger the image positioning and the container and fill in the table with colors, and finally form a shadow effect.
So far, this effect has been successfully completed. What? Not beautiful enough? Should it be more refined? These work will be done by the person who pursues perfection.