[CSS disclosure] irregular projection

Difficulties

Normal elements add Border-radius the resulting shape adds box-shadow to the perfect effect. But when ordinary elements add pseudo-elements or translucent decorations, Box-shadow will be a little overwhelmed. Because Boder-radius will shamelessly ignore the transparent part.

Scene:

1. Translucent image, background image, Border-image

2 a dot, dashed, or translucent border, but no background

3. Dialog bubbles generated by pseudo-elements

4. Chamfer shape

5. Chamfer shape

6. Diamond Image

To solve the irregular shape of the projection, the simplest way is to use the filter filter, the greatest advantage of using CSS filters is the smooth degradation.

Common filter filter functions include: Blur () grayscale () Drop-shadow ()

The filter will put any non-transparent part of the projection, so it is not recommended to set the text separately Text-shadow, while the Text-shadow and Box-shadow produced by the shadow effect is two different.

box-shadow:2px 2px 5px rgba (0, 0, 0, 0.5);

Box-shadow

Filter:drop-shadow (2px 2px 5px rgba (0, 0, 0, 0.5));

Filter

Next lecture blur () grayscale ()

[CSS disclosure] irregular projection