“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

Using the box-shadow property for shadow effects is a very useful technique in modern browsers, and we can do a lot of cool things with it. Although it is a commonly used property, do you really understand it fully? Let’s learn again!

introductory

Basis for instance

In order to facilitate peacetime can be directly used, so write in the front, the following has a detailed attribute analysis;

*/ box-shadow: 0 0 3px 3px # CCC; /* box-shadow:inset 0px 0px 5px 1px #000; /* left */ box-shadow: -7px 0 5px -5px #333; /* right */ box-shadow: 7px 0 5px -5px #333; /* on */ box-shadow: 0-7px 5px -5px #333; /* * * */ box-shadow: 0 7px 5px -5px #333; Box-shadow: 3px 3px 1px 1px #666; /* top right */ box-shadow: 3px -3px 1px 1px #666; Box-shadow: -3px 3px 1px 1px #666; /* top left */ box-shadow: -3px -3px 1px 1px #666;Copy the code

The box – shadow grammar:

X offset | y offset | | fuzzy shadow radius | | shadow color shadow shadow diffusion radius to inside the box - shadow: offset-x | offset-y | blur-radius | spread-radius | color | inset;Copy the code

Note:

1) Write only two values, so they will be treated as offset-x and offset-y;

2) If the third value is written, the third value will be treated as blur-radius;

3) If the fourth value is written, the fourth value will be treated as spread-RADIUS;

4) Optional, inset keyword.

5) Optional, color value.

div {
  width: 150px;
  height: 150px;
  background-color: #fff;

  box-shadow: 120px 80px 40px 20px #0ff;
}
Copy the code

Box-shadow attribute analysis

Offset-x

The offset-x property moves the shadow left and right along the X-axis

Example:

The box - shadow: 20 px 0 px rgba (0,0,0,0.5); Box - shadow: - 20 px 0 px rgba (0,0,0,0.5);Copy the code

The horizontal offset of the shadow, with a positive value indicating that the shadow will be on the right side of the box, and a negative offset indicating that the shadow will be on the left.

offset-y

The offset-y property moves the shadow up and down the Y-axis

Example:

Box - shadow: 0 px 20 px rgba (0,0,0,0.5); Box - shadow: 0 px - 20 px rgba (0,0,0,0.5);Copy the code

The vertical offset of the shadow, with a negative value indicating that the box shadow will be above the box and a positive value indicating that the box shadow will be below the box.

Blur -radius Indicates the blur radius

The blur- RADIUS attribute blurs the color around the button

Example:

Box-shadow: 0 0 50px rgba(0,0,0,0.8);Copy the code

Blur radius (optional), if set to 0 the shadow will be sharper, the larger the number, the more blurred it will be. It cannot be negative.

spread-radius

This value spreads our shadow around our button

Example:

Box-shadow: 0 0 0 50px rgba(0,0,0,0.5);Copy the code

Propagation radius (optional), positive value increases the size of the shadow, negative value decreases the size. The default value is 0 (the shadow and blur sizes are the same).

Text-shadow Indicates the text shadow

The shadow of a text is implemented using the text-shadow property, which is used very similar to box-shadow.

The only difference is that text-shadow has no spread value and no inset keyword.

It only applies to text nodes.

Grammar:

Example:

/* test 1 */ text-shadow:2px 3px 6px #000; /* test 2 */ text-shadow:2px 3px 1px #000;Copy the code

Prestige usage

Multiple shadows

An element can have multiple shadows separated by commas.

Example 1:

 box-shadow: 5px 5px 10px #FF00FF, -7px -4px 4px #FF9966;
Copy the code

Example 2:

box-shadow:-10px 0 10px red, 10px 0 10px blue,0 -10px 10px yellow,0 10px 10px green;
Copy the code

Note: 1) When using multiple shadow attributes for the same element, you need to pay attention to the order of the attributes. The first shadow is displayed at the top level. 2) If the blur value of the front shadow is less than the blur value of the back shadow, the front shadow is displayed above the back shadow. If the blur value of the front shadow is greater than the shadow blur value of the back shadow, the front shadow will cover the shadow effect of the back shadow.

The drop shadow shadow

Grammar:

 drop-shadow(offset-x offset-y blur-radius spread-radius color)
Copy the code

Similar to the box-shadow property. But the box-shadow attribute creates a rectangular shadow behind the entire box of the element, while the drop-shadow() filter creates a shadow that matches the shape of the image itself (the alpha channel).

Example 1:

Note the position of the triangle, usingbox-shadowThe position of the triangle has no shadow; But the use of drop-shadow, it is;

.bubble-box {
    width: 150px;
    margin: 40px; padding: 50px;
    background-color: #66CCFF;
    position: relative;
    font-size: 24px;
}
.triangle {
    position: absolute;
    left: -40px;
    width: 0; height: 0;
    overflow: hidden;
    border: 20px solid transparent;
    border-right-color: #66CCFF;
}
.box-shadow {
    box-shadow: 5px 5px 10px black;
}
.drop-shadow {
    filter: drop-shadow(5px 5px 10px black);
}
******************************
<div class="bubble-box box-shadow">
    <i class="triangle"></i>
    box-shadow
</div>
<div class="bubble-box drop-shadow">
    <i class="triangle"></i>
    filter: drop-shadow
</div>
Copy the code

Example 2:

If you have a picture of a T-shirt and you want to add some shadows to it, the different shadows will look like this;

You can see that if box-shadow is used, the shadow will be on the surrounding boxes;

With drop-shadow, the shadow is placed around the T-shirt.

References: Learn the CSS Box-Shadow Property by Coding a Beautiful Button MDN Web Docs box-shadow Creating Glow Effects with CSS

Just like it before you go! 🤞 🤞 🤞