Box-shadow are you sure?

This is the fourth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

compatibility

Box-shadow is compatible with most browsers on the market, so compatibility is not a concern.

What is the

Box-shadow allows you to add a shadow to an element. Multiple shadows can be added to an element.

grammar

Box-shadow :offset-x offset-y blur spread color position

offset-x

Specifies the horizontal offset of the shadow. That’s where the shadow is on the X-axis. A positive value causes the shadow to appear to the right of the element, while a negative value causes the shadow to appear to the left.

offset-y

Specifies the vertical offset of the shadow. The position of the shadow on the Y-axis. Positive values cause the shadow to appear below the element, and negative values cause the shadow to appear above the element.

blur

Specifies how blurred the shadow is. The greater the value, the more blurred it is.

spred

Specifies the size of the shadow extension. The larger the value, the more it increases.

color

Specifies the color of the shadow

position

Specify the location of the shadow, which can be changed to an internal shadow using inset

Multiple shadows

The box-shadow attribute can accept multiple shadows on a single element. Each shadow is loaded with a comma-separated list of box-shadow properties.

box-shadow: 20px 20px 20px 10px blue,
-20px -20px 20px 10px black;
Copy the code

A simple example

Unilateral shadow

Box-shadow: 0 8px 10px 0px black;

You’ll notice that if you use blur you’ll get shadows in three directions and in this case you only want the shadow on the bottom,

The third and fourth parameters cancel each other out, making the other border effects hidden.

The circular shadow

box-shadow: 20px 20px 20px 10px blue,
border-radius: 50%;
Copy the code

Cascading effect

Receives multiple shadow effects with a single element

box-shadow: rgba(240.46.170.0.4) 5px 5px,
     rgba(240.46.170.0.3) 10px 10px, 
     rgba(240.46.170.0.2) 15px 15px, 
     rgba(240.46.170.0.1) 20px 20px, 
     rgba(240.46.170.0.05) 25px 25px;
Copy the code