This is the sixth day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

box-shadow

Box-shadow means box shadow. We can set a shadow effect on an element. If we set a downward shadow effect:

.wrapper {
    position: fixed;
    left: 0;
    top: 0,
    bottom: 0,
    right: 0,
    background-color: red;
    box-shadow: 0 3px 5px rgba(0.0.0.3)}Copy the code

The 0 in box-shadow above indicates the horizontal offset, 3px indicates the vertical offset, 5px indicates the blur size, and RGBA (0, 0, 0,.3) indicates the color of the projection.

Commonly used projection effects are mainly made up of offset, blur and color.

For both shadow effects and box shadows, the light source defaults to the top left corner, so a horizontal offset if integer means the shadow is to the right, a negative means the shadow is to the left, and the same goes for a vertical offset.

Inner shadow

Box-shadow supports the inset keyword, which indicates that the shadow is inside the element.

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    box-shadow:inset 3px 3px 5px rgba(0.0.0.6);
}
.box1 {
    width: 100px;
    height: 100px;
    background-color: blue;
    box-shadow: 3px 3px 5px rgba(0.0.0.6);
}
Copy the code

Box-shadow: The inner shadow effect is suitable for embedding effects, showing the visual effect of a lower layer.

Bobx-shadow: The horizontal and vertical offsets of the inner shadow are in the same direction as the outer shadow, and are the upper-left light source.

Color coverage

Box-shadow can generate a shadow below the text content and above the background color, so we can implement a layer of color over the elements.

Box-shadow color overlay is limited and does not work with tag elements such as IMG.

Something that’s easy to miss

Box-shadow can receive 2-4 values. The first two values are fixed, representing horizontal offset and vertical offset respectively, the third value represents blur radius, the fourth value represents extended radius, and the fourth value is rarely used in daily life, mainly used in two aspects: contour simulation and one-sided shadow.

Contour simulation can be achieved by virtue of the fourth length value:

.warpper {
    background-color: blue; // Outline simulationbox-shadow: inset 0 0 2px #BF56FC;
}
Copy the code

One side shadow can be achieved with the extended radius, because the extended radius supports negative values. When we set the blur radius to a higher value, we can see partial shadows on the left and right sides.

.warpper {
    width: 160px;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 3px 6px rgba(0.0.0.4);
}
Copy the code

Box-shadow also allows for multiple borders, and also supports rounded corners. We just need to set a few more to superimpose it.

If you want to use box-shadow for multiple CSS loading effects, you can combine it with KeyFrames so that animation effects are available as well.

Box-shadow can also be used for animation and performance optimization. For example, we implemented a transition effect for a box shadow:

.wrapper {
    transition: all .4s;
    box-shadow: 0 7px 11px rgba(0.0.0.0.4);
}

.wrapper:hover {
    box-shadow: 0 15px 23px rgba(0.0.0.0.8)}Copy the code