What's a box-shadow?

CSS box-shadow Properties allow you to add one or more shadow effects to the frame of the element. It's not just adding UI. The depth and stereotypic sense of the `distantness' of the visual sense of the different layers of content can also be distinguished. A perfect shadow that will make your web page alive from flat to flat is a powerful weapon for solving the problems of “one-way interface” and “unfocused”.

Specific roles of box-shadow parameters

Horizontal offset (X-offset): Positive moves the shadow to the right and negative moves the shadow to the left.
Vertical offset (Y-offset): Positive moves the shadow down, negative moves the shadow up. It determines the location of the virtual light source.
Blur Radius: The larger the value, the blurring and dispersing of the shadow; The smaller the value, the clearer the shadow, the sharper it becomes.
Extended Radius: Positive values increase the size of shadows and negative values reduce shadows. It can be used to fine-tune the depth of the shadow.
Inset: Moves the shadow from the external to the internal element, creating a "deep" or "down" visual effect.

Professional design techniques: How to create real shadows?

In nature, shadows are often extremely soft and hierarchical:

Avoid pure black: Use black with transparency (e.g.) rgba(0,0,0,0.1) Or deep blue, more natural than pure black.
Multiple layers supersing: To achieve supersweet effects, top designers usually superstition 2-3 layers of shadows, each with different fuzzy and deflective levels.
Considering photo-consistency: Ensures that all elements of the page are given the same direction of shadowing, which makes the whole UI more logical.

Common issues (FAQ)

Q: Does shadow affect performance?
A: A large or extremely complex number of blurries may increase the rendering pressure of the browser, especially when moving to a moving end or rolling. It is recommended that this be done with proportionality.

Q: How do you make shadows float with the mouse?
A: You can set the elements transition: box-shadow 0.3s ease; , and then in :hover in a state.

Q: Why can't my inner shadows be seen?
A: Ensure that the background colour of the elements is sufficiently contrasted with the shade colour, or try to add a vague radius and an extended radius.