The problem

Problem found when adding shadow for infoWindow anchor: Since the small triangle of anchor is written with CSS border border, directly adding box-shadow will cause shadow effect on the whole square outer frame outside the triangle.

Solution: use cSS3 filter:drop-shadow to add shadows to pseudo-elements.

The solution

Take a bottom-center anchor as an example:

It can be found that the triangle has no shadow effect and the anchor point is not obvious enough.

Anchor point code:

.anchor {
    width: 0;
    height: 0;
    align-self: center;
    position: absolute;
    border: 7px solid transparent;
    border-bottom: none;
    border-top-color: #fff;
    top: 0px;
}
Copy the code

You can see that the anchor point is drawn using the CSS border property, with the border-top white and the other borders transparent, resulting in a downward white tip.

At this point, if the box-shadow attribute is directly added to anchor:

Box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);Copy the code

As shown in the image above, the effect is a rectangular shadow on the outer edge of the entire border. Because box-shadow draws the shadow of the entire div, whether the element is transparant or not.

Therefore, the filter:drop-shadow attribute is appropriate, because this attribute is a true projection. It only casts the shadow of the real figure, that is, transparent parts are no longer shaded.

And should be written to the parent element mtmap-InfoWindow of the body and Anchor. Specific code:

Infowindow {filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.1)); }Copy the code

Now you can have the Anchor shadow effect!

Optimization effects in eight directions:

By the way, summarize the difference between box-shadow and filter: drop-shadow

One, compatibility is different

Box-shadow is supported from IE9.

Filter drop shadow IE13 is now supported.

Two, the same parameter value, performance effect is different

The drop-shadow syntax in filter is as follows:

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

Such as:

The code block

CSS

Copy the code
filter:drop-shadow(5px 5px 10px black)
Copy the code

However, if box-shadow is used with the same parameter value, for example:

The code block

CSS

Copy the code
box-shadow: 5px 5px 10px black;
Copy the code

Box-shadow has a smaller shadow distance and a deeper color value:

Drop-shadow has no inner shadow effect

Box-shadow Supports inset shadow, such as:

The code block

CSS

Copy the code
box-shadow: inset 5px 5px 10px black;
Copy the code

But the drop shadow

Drop -shadow cannot be superimposed

Box-shadow can be accumulated arbitrarily, so in theory we can draw any image using box-shadow.

But drop-shadow doesn’t

Shadows vs box shadows

This is the most important difference between the two.

Box-shadow refers to the shadow of a box. Even if the box is transparent in the middle, the light cannot penetrate when it is Shadowed; But drop-shadows correspond to projections of the real world, non-transparent colors, there are projections; The transparent part, the light coming through, no projection, nothing to do with the box.

PS: Drop-shadow can not only penetrate transparent parts of code built elements, but also transparent parts of PNG images.