Suppose we now have a visual requirement to shadow every element in the following SVG diagram, as shown below:

What’s the first thing that comes to mind? If before, do not want to think, is directly designed by the designer, cut the picture on the matter.

Think about it now, because CSS3 provides two properties that implement shadows: box-shadow and drop-shadow.

The box-shadow property is the one most people think of using to implement this property. Let’s try it out and see what happens:

Our requirement was to shadow every bird, and with box-shadow, that didn’t work. Box-shadow Is just the shadow of a box. So it is not surprising that the above effect is present.

This is the time for drop-shadow. Drop-shadow is the shadow filter in CSS3. It matches the projection of the real world. The transparent part, the light passes through, no projection.

Our graphics happen to be in SVG format, and each element is a text node, just like the drop-shadow concept, with transparent and opaque parts, so it works perfectly.

The syntax for drop-shadow is as follows:

Filter: drop-shadow(x offset, Y offset, blur size, color value);Copy the code

We only need to use drop-shadow to implement our need to shadow each element:

Filter: drop - shadow (25 px 25 px 25 px rgba (26,58,70,0.7));Copy the code

Just one sentence can create the shadow effect shown below: