CSS3 Box-shadow attribute usage and single-sided shadow effect settings

3.5.2 Box-shadow Property Usage method (1)

Compared with PSD software, Box-shadow modifies the shadow effect of the element much more conveniently, because Box-shadow can modify six parameters to get different effects. Here are some simple examples to illustrate the Box-shadow properties.

1. Single-sided Shadow effect

A single-sided shadow effect that defines an element is similar to the single-sided border color of attune border, for example:

1. > 

As shown in effect 3-38.

In this case, the Box-shadow is used to set the side shadow effect on the top, right, bottom, and left side of the element. The Box-shadow is mainly achieved by the offset of the horizontal and vertical shadows, where the x-offset is positive, the right shadow is generated, the inverse is negative, the left shadow is generated, and when the Y-offset is positive, the bottom shadow is generated, and the negative value is the top shadow. In this example, there is a single-sided shadow projection effect (the shadow blur radius is 0), but if the blur radius of the shadow is not 0, can the above method achieve a unilateral shadow effect? In no hurry to answer, add a blur radius to the above instance, for example:

1. . Top {        box-shadow:0 -2px 5px red;      }      . Right {        box-shadow:2px 0 5px Green;      }      . Bottom {        box-shadow:0 2px 5px blue;      }      . Left {        Box-shadow: -2px 0 5px Orange;      }

Figure 3-39 illustrates that this effect is not an ideal one-sided shadow effect, and when Box-shadow adds a 5px shadow blur radius, the shadow is no longer a shadow projection, the shadow sharpness spreads outwards, and the effect is more shaded. But it creates another problem, adding a faint shadow effect to the other three sides of the element, but this is not the effect the design requires.

What the hell do you want to do? At this point, the shadow extension radius (Spread-radius) in the Box-shadow attribute is a key attribute that must be fitted with this attribute (except for the one-sided shadow) to achieve the single-sided shadow effect.

1. . Top {        box-shadow:0 -4px 5px-3px red;      }      . Right {        box-shadow:4px 0 5px-3px Green;      }      . Bottom {        box-shadow:0 4px 5px-3px blue;      }      . Left {        Box-shadow: -4px 0 5px-3px Orange;      }

The above code adjusts the amount of shadow displacement, adding a box-shadow radius,