Detailed explanation of the difference and application of CSS3 filter:drop-shadow filter and box-shadow

To use standard CSS3 to achieve the shadow effect of an element, there are two routines. The first is to use the common box-shadow , and the second is to use the CSS3 filter shadow filter drop-shadow . What are the specific differences between these two shadow implementations?

1. Compatibility varies

CSS3 box-shadow has been supported since IE9, and the compatibility is shown in the following screenshot:

drop-shadow filter is only supported in IE13 and in Android 4.4 on mobile devices. The compatibility is as shown below:

2. The same parameter values ​​have different performance effects

The drop-shadow syntax in filter is as follows:

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

filter:drop-shadow(5px 5px 10px black)

Represents a black shadow offset 5 pixels to the lower right and blurred by 10 pixels. Seeing is believing, see the picture below for an illustration.

However, if you use box-shadow with the same parameter values, for example:

box-shadow: 5px 5px 10px black;

You will find that the shadow distance of box-shadow is smaller and the color value is darker:

3. Drop-shadow has no inner shadow effect

box-shadow supports inset shadows, such as:

box-shadow: inset 5px 5px 10px black;

However, drop-shadow does not.

4. Shadow vs Box Shadow

drop-shadow has a very powerful feature, and this one feature gives it enough opportunities to shine in the future! That is, drop-shadow is the real projection, while box-shadow is just a box shadow.

What does it mean?

Let's use CSS border to write a dotted box, for example:

 border: 10px dashed #fa608d;
    height: 50px;
    width: 50px; 

We then apply box-shadow and drop-shadow filters respectively:

box-shadow: 5px 5px 10px black;
 filter: drop-shadow(5px 5px 10px black);

box-shadow:

filter:drop-shadow:

box-shadow , as the name suggests, is just the shadow of the box. Think about it, the middle of the box is transparent, but when it casts a shadow, the light cannot penetrate it. However, drop-shadow conforms to the projection in the real world. For non-transparent colors, I have a projection; for the transparent part, light passes through without projection, and whether it is a box or not has nothing to do with me.

drop-shadow can not only penetrate the transparent parts of elements constructed by code, but also the transparent parts of PNG images, as shown below:

6. Practical application of drop-shadow

When we implement the floating panel with arrows pointing to it, considering compatibility, the triangles are basically drawn with border , and box-shadow cannot be used. However, the designer hopes that the rectangular part will have a shadow.

The arrow has no shadow and can be camouflaged. Now, with drop-shadow , the shadow really becomes a shadow.

CSS code:
.box {
    margin: 40px; padding: 50px;
    background-color: #fff;
    position: relative;
    font-size: 24px;
}
.cor {
    position: absolute;
    left: -40px;
    width: 0; height: 0;
    overflow: hidden;
    border: 20px solid transparent;
    border-right-color: #fff;
}
.box-shadow {
    box-shadow: 5px 5px 10px black;
}
.drop-shadow {
    filter: drop-shadow(5px 5px 10px black);
}
HTML code:
<div class="box box-shadow">
    <i class="cor"></i>
    box-shadow
</div>
<div class="box drop-shadow">
    <i class="cor"></i>
    filter: drop-shadow
</div> 

This is the end of this article about the differences and applications of CSS3 filter: drop-shadow and box-shadow. For more related CSS3 filter: drop-shadow and box-shadow content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!