How to use filter:drop-shadow of CSS

This article mainly introduces CSS filter:drop-shadow how to use the relevant knowledge, detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that everyone will read this CSS filter:drop-shadow how to use the article will have some gains, let's take a look at it.

Our requirement was to shadow every bird, and box-shadow didn't do the trick we wanted. Box-shadow Gu Mingsi means "box shadow," just the shadow of the box. Therefore, it was expected that the above effects would appear.

At this time, it is the turn of drop-shadow to appear, drop-shadow is the shadow filter in filter (filter) in CSS3, it matches the projection of the real world, non-transparent color, there is projection; transparent part, light passes through, no projection.

And our graphics happen to be SVG format, each element is a text node, just like the drop-shadow concept, there are transparent and non-transparent parts, so it is perfect for it.

Drop-shadow syntax is as follows:

filter: drop-shadow(x offset, y offset, blur size, color value);

We only need to use drop-shadow to fulfill our requirement of shading each element:

filter:drop-shadow(-25px 25 px 25px rgba(26,58,70,0.7)); About "CSS filter:drop-shadow how to use" The content of this article is introduced here, thank you for reading! I believe everyone has a certain understanding of the knowledge of "CSS filter:drop-shadow how to use". If you still want to learn more knowledge, please pay attention to the industry information channel.