Today we’re going to look at “shadows.” When I was learning art, I would contact sketch to draw a cup or a sphere. This time often happened. The teacher’s drawing was very realistic, with a strong sense of three-dimensional and layering. After the teacher’s explanation, we know that we want to draw the object, with a three-dimensional sense, usually: highlights, dark surface, gray surface, projection (shadow), these parts. Now that we’re done talking about shadows in graphics, let’s think about how to paint shadows in our pages. Which brings us to today’s topic, box-shadow in CSS3.

To explore the box – shadow

Before we talk about box-shadow, let’s take a look at some pictures to get a feel for box-shadow in detail.

​

Doesn’t it look like a piece of paper, a little bit shaded.

One more shadow

​

What? Is this also a shadow? (Don’t lie to me about border…)

And a little more exciting shadow

​

This is also drawn with box-shadow, right?

The images above were indeed drawn using box-shadow, which may come as a bit of a shock (Figure 1 is subtle, Figure 3 is cool, and Figure 2 is a bit of a joke). Next, let’s officially explore the dark magic of Box-shadow ！！！！

The literal translation is called “box shadow”, and the literal translation is consistent with our common perception. CSS has a box model, for the box model shadow. Remember, this is for the shadow of the box (element), which we’ll talk about later.

The box-shadow attribute value consists of six parts.

Grammatical form:

box-shadow: offset-x offset-y blur spread color position;

I can put position up front here. Or you could write it at the back like this.

Let’s take a look at what these attributes provide.

1. offset-x offset-y

Offset-x is used to declare the horizontal offset of the shadow, which is the position of the shadow on the X-axis.

When it’s positive, the shadow is to the right of the element,

If the value is negative, the shadow is to the left of the element.

In the same way

Offset-y is used to declare the vertical offset of the shadow, which is the position of the shadow on the Y-axis.

When the value is positive, the shadow is underneath the element,

If the value is negative, the shadow is on the top of the element.

Example:

CSS:

.demo { 
  width: 100px; 
  height: 100px; 
  background: #fcc; 
  box-shadow: 10px 10px; 
} 
Copy the code

Results:

​

We can see from this that it’s shaded, and we can see from the above that it’s (10px, 10px) moving down to the right by 10px, and the same negative value is moving up to the left. Next we have Blur

2. blur

Blur indicates the blur radius of the shadow. The effect is the same as the Gaussian blur filter used in the design software.

A value of 0 means the shadow is not blurred at all.

The higher the blur value is, the less sharp the edges and corners are, and the more obscure the shadows are.

Negative values are not allowed. Negative values are equal to 0.

Modify in our example above:

CSS:

box-shadow: 10px 10px 10px; 
Copy the code

Results:

​

We can see the shadows fading.

One thing to note here: there is no W3C specification for how browser vendors should implement the blur effect, but it is almost as good as gaussian blur. One thing to be aware of, however, is that the blur effect will increase the area of the shadow.

​

Demo0 is the effect with blur radius 0, and you can see that the shadow size is exactly the same as the element size. Demo1 has a blur radius of 10px, and you can see that the shadow size has expanded, while Demo2 has expanded more.

Now we know that blur radius increases the shadow size when it is greater than 0, but how much does it increase the shadow size?

So we need to figure out where the blurring started. When you look at it with the naked eye, the starting point of the blur is the edge of the shadow box. That’s the way it is. Blur radius / 2 for divergence distance. In Demo2, the shadow size already overlaps with the element box, because the left border of the shadow box has spread 15px to the left, more than the 10px horizontal distance between them.

3. spread

Spread indicates the size of the shadow.

When the value is positive, the shadow spreads out.

If the value is negative, the shadow shrinks to less than the element size.

The default value of 0 keeps the shadow and element size the same.

​

In this, we can see that when the spread is 10px and the margin is 10px, they overlap.

The spread value is + the value of the spread value. When spread is negative, the value of — spread is further away

4. color

Color indicates the color of the shadow.

It could be any color unit.

There’s nothing to say about that.

5. position

Position Indicates the position of the shadow.

Default is external shadow. Internal shadows can be created by using the inset keyword. You don’t have to declare external shadows by default, if you want to use internal shadows you have to declare inset first and last.

Such as:

 box-shadow: inset 0px 0px 0px 10px #0ff; 
Copy the code

Effect:

​

It’s obvious that the shadow is in there.

Next, we also analyze spread and blur RADIUS for inner shadows.

We can see that in the picture above.

When the spread value is positive, it can be seen that the inner shadow starts filling from the boundary. Does the border start at the border or the padding?

​

CSS:

border: 10px solid #f0f; 
padding: 10px;
box-shadow: inset 0px 0px 0px 10px #0ff; 
Copy the code

We can see that

Use the Padding area as a starting point to extend the shadow inward. The extension radius is the value of spread, negative values are meaningless, and no padding area begins with the content area.

Blur RADIUS /2 starts from the same position as the spread. If there is padding, start from the padding, not from the content.

Here’s the hierarchy of box-shadow (z-index) for outer shadow (default) :

​

For outer shadows: high and magin lower than background.

For inner shadows: height and padding below content.

Box-shadow can not only distinguish between inner and outer shadows but also apply multiple shadows to overlay.

Each shadow is separated by a comma.

Such as:

CSS:

width: 100px; 
height: 100px; 
background: #fcc; 
padding: 10px; 
border-radius: 50%; 
box-shadow: 120px 0px 0 -10px #f0f, 
						95px 10px 0 0px #d00, 
						30px 20px 0 -10px #cdd, 
						90px -10px 0 0px #add, 
						40px -30px 0 0px #edd; 
Copy the code

Results:

​

The level is also written after the back. We can write an element with multiple borders because it can overlap

​

Such a good target.

​​

Long press the QR code to pay attention and work together.

​

Help with the missing person notice

​

Wechat public number reply add group study together.

​