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

In the article “how to implement multiple borders | quick CSS implementation frame of four kinds of way,” the article, we introduced how to use the shadow box – shadow generated multilayer frame. Today, let’s see what else box-Shadow can do.

Basic usage

One well-known CSS shadow property, box-shadow, can be used to draw shadows around a graph.

Box-shadow: MDN

The box-shadow attribute is used to add a shadow effect to the frame of an element. You can set multiple shadow effects on the same element and separate them with commas. The values that this property can set include the X-axis offset, Y-axis offset, blur radius, spread radius, and color of the shadow.

That is:

box-shadow: (inset) X-axis offset, Y-axis offset, blur radius, spread radius, colorCopy the code

Inset represents the internal shadow. The X and Y offset is allowed to be negative. And box-shadow allows you to add multiple shadow effects separated by multiple commas.

The following is the original MDN:

  • When given two, three, or four<length>Value.
  • If only two values are given, they will be treated as<offset-x><offset-y>To explain.
  • If a third value is given, the third value will be treated as<blur-radius>Explanation. (blur radius)
  • If a fourth value is given, the fourth value will be treated as<spread-radius>To explain. (Diffusion radius)

The related property styles are shown in the following figure:

SAO operation

Negative values are allowed for both X and Y values, and negative values for the blur radius are not allowed. The minimum value is 0. Now, can the diffusion radius be negative? Let’s test it out:

<div class="box" style="box-shadow: 0px 100px 0px -20px black;">box-shadow: 0px 100px 0px -20px black;</div>
<div class="box" style="box-shadow: 0px 100px 0px 0px black;">box-shadow: 0px 100px 0px 0px black;</div>

Copy the code

The display looks like this. You can see that when the spread radius is negative, the overall size of the shadow decreases both horizontally and vertically. After comparison, when set to -20px, the dull side decreased by 20px and both sides decreased by 40px.

Using this property, we can draw a unilateral reference using CSS Secret, as shown below:

A handy tool

Box-shadow_generator is a convenient way to generate multiple shadow effects.