How to use pseudo-classes to implement Box Shadows in css

This article is about how css uses pseudo-classes to implement box shadows. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Pseudo-classes implement box shadows

As we all know, Animate/transition box-shadow can use the box-shadow attribute to achieve the box shadow effect, but repaint consumes a lot, so this paper proposes to realize the box shadow by modifying the transparency of pseudo elements.

The principle of implementation:

* * by changing the transparency so that its value is updated from a non-default value, there is no need to undertake any redrawing

Here, set an empty pseudo element to hide the shadow transparency to 0, and then restore its transparency by hovering over the mouse. Here is a code comparison between traditional and pseudo classes.

Before

Animate/transition box-shadow can use the box-shadow property to achieve the box shadow effect, but repainting is more expensive

After

The same effect is achieved by modifying the transparency of pseudo elements, without redrawing consumption

Before {padding: 1em; background-color: # fff;-webkit-transition: 0.2s; transition: 0.2s;} .before:hover {box-shadow: 0 10px 0 rgba (0,0,0,0.3);} .after {position: relative; padding: 1mm; background-color: # fff;} .after:before {content: "; position: absolute; top: 0; right: 0; bottom: 0 Left: 0; z-index:-1; box-shadow: 0 10px 0 rgba (0,0,0,0.3); opacity: 0; will-change: opacity;-webkit-transition: 0.2s; transition: 0.2s;}. After:hover:before {opacity: 1;}

Thank you for reading! This is the end of the article on "how css uses pseudo-classes to achieve box shadow". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!