Make writing a habit together! This is the fifth day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

Hi, I’m Banxia 👴, a sand sculptor who has just started writing. If you like my article, you can follow ➕, click “like” 👍 and add my wechat: FrontendPicker to learn about the frontend of communication and become a better engineer. Click me to explore a new world!

The shadow effect is often used in daily front-end development (although it may be less if you are working on a management system). For example, this code was copied from the Ant-Design website.

    box-shadow: 1px 0 #0000000f,
    		  0 1px #0000000f, 
    		  1px 1px #0000000f, 
    		  1px 0 #0000000f inset, 
    		  0 1px #0000000f inset;
Copy the code

As one of the most basic properties in CSS (personal opinion), everyone knows that box-shadow is used to create shadows, but do you really know how it creates shadows? What does each of his values mean?

role

Box-shadow can attach one or more shadows to a box. It can accept None without shadows or a comma-separated list of shadows.

grammar

Box-shadow accepts 2-4 length values, an optional color value, an optional inset keyword, and the omitted length value defaults to 0.

/ * x offset | y offset | | | fuzzy shadow radius shadow diffusion radius of the shadow color * / box - shadow: offset - the offset x - y the blur - radius spread - the radius. Color position; Box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);Copy the code

Note that at least two length values are required, namely offset-x and offset-y, and the shadow blur/spread radius can be omitted, default to zero!

  • Offset-x: indicates the horizontal offset. Positive shadows are offset to the right of the container. Negative shadows are on the left of the container.

     box-shadow: -5px 20px  0px 0px green,
            5px 20px  0px 0px red  ;
Copy the code

  • Offset-y: vertical offset. Positive shadows are offset below the container and negative shadows are offset above the container

  • Blur -radius: the value is **[0,∞]**. Negative values are invalid.

  • Spread-radius: indicates the spreading radius of the shadow. A positive value indicates the spreading radius outward, and a negative value indicates the shrinking radius inward.

  • Color: Specifies the color of the shadow. Can be omitted, omit the default value is currentColor. CurrentColor CSS is a keyword.

  • Inset: inner shadow. This property can also be unloaded before offset-x.

The shadow is at the top of the container

In the shadow application, I didn’t realize at first that the shadow was on top of the container and that it didn’t count as content.

It wasn’t until I used the inset attribute that I realized the shadow was on top of the container. Of course, this could also be the difference between inner and outer shadows.

  .boxShadow{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            box-shadow: 5px 20px  0px 0px green ;
        }
Copy the code

But look at the following example: we have two adjacent containers, and when we add a shadow to the top container, the entire shadow will cover the bottom container

On top of the container, because the two containers are on the same level, so we can see that the shadow is on top of the container!

A closer look shows that the container does not have a scroll bar, even though the shadow is much larger than the container, which is a good indication that the container does not count as content!

The past life of the shadow

     .boxShadow{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
Copy the code

In the code above we defined a container that is 200px wide and 200px high

Shadow size and offset

box-shadow: 0px 0px 0px 0px green;
Copy the code

When we set both offsets to 0, the effect is as follows:

At this point, there is no shadow. Do we guess that the shadow is the same size as the container? It’s still small.

Now we add the horizontal and vertical offsets

box-shadow: 20px 20px 0px 0px green;
Copy the code

At this point we can observe that the two sides where the shadow appears are the same length as the container. So we’re sure the shadow is the same size as the container!

When we set the horizontal and vertical offsets for the shadows, the whole thing is offset directly, and the browser clipped out the area above the container!

blur-radius

Let’s take a look at the official document:

A non-zero blur radius indicates that the resulting shadow should be blurred, such as by a Gaussian filter. The exact algorithm is not defined; however the resulting shadow must approximate (with each pixel being within 5% of its expected value) the image that would be generated by applying to the shadow a Gaussian blur with a standard deviation equal to half the blur radius

That is, when we add a blur radius to the shadow, the shadow will start at the center of each edge and blur to both sides of the line, and the radius is half of the blur radius!

We have a 20px blur radius:

-shadow: 40px 20px  20px 0px green;

Copy the code

For visual purposes, we offset the shadows to the outside of the container.

box-shadow: 300px 0px  60px 0px #0d00ff;

Copy the code

We mark the original size of the shadow with a red box the size of the container, and when we look at the boundary (which may not be very accurate), we find that the inside and outside blur is the same size.

spread-radius

In MDN, the fourth variable is called the diffusion radius. But I prefer to call it diffusion distance!

We have no fuzzy radius

            box-shadow: 20px 20px  0px 10px green;

Copy the code

Set the spread radius to 10px, and you’ll notice a 10px extra distance around the entire shadow. It actually changes the size of the shadow. The initial shadow size is the same as the container size. After setting the spread radius, the shadow size increases in four directions.

If the blur radius is set, the shadow will blur from the new center to both sides of the line.