Definition and syntax of box-shadow

When we need to set multiple shadows, we need to separate each shadow with a comma.

/* HTML code */ <div class="test"></div> /* CSS code */. Test {width: 100px; height: 100px; background: yellow; margin: 100px auto; border-radius: 50%; Box-shadow: 10px 10px 20px 10px rgba(255,255,0,0.5), -10px 10px 10px 10px rgba(255,255,255,0.5)}Copy the code

Here we set a circle with the border-radius property and add a light yellow shadow and a white shadow to the circle.

Take the first shadow: box-shadow: 10px 10px 20px 10px rgba(255,255,0,0.5) for example:

This code indicates that the horizontal position of the shadow is shifted 10px to the right;

The vertical position is moved down 10px;

The third 10px represents the degree of blur of the shadows, so we also set it to 20px;

The fourth 10px is the shadow radius; The last one specifies the shadow color as rgba(255,255,0,0.5).

That is, we add a deviation box for the div element with class test and a light yellow shadow 10px to the right, 10px down, 10px blur radius, and 10px shadow radius

Using the CSS code above, let’s look at the effect of setting two shadows at the same time:

To see the effect of the above shadow Settings more directly, let’s remove the second shadow and leave only the first shadow:

2. Box-shadow attribute value detailed analysis

1. H-shadow

When it is positive, it moves to the right by a certain distance, and when it is negative, it moves to the left. This distance can be measured in units of px, EM, or REM;

Box-shadow: 10px 0px 10px rgba(0,0,0,0.9) /* shadow appears on the right side of the element */Copy the code

Box-shadow: -10px 0px 10px rgba(0,0,0,0.9) /* shadow appears on the left side of the element */Copy the code

2. V-shadow

When the value is negative, it is offset upward by a certain distance. A positive value indicates a downward offset by a certain distance.

Box-shadow: 0px -20px 10px rgba(0,0,0,0.9)/* shadow appears above the element */Copy the code

3. Blur [Optional]

Blur refers to the blur radius of the shadows. This value makes the transitions in the shaded areas look softer. We can try the effect of different blur values on the shadow effect:

Box-shadow: 10px 10px 5px rgba(0,0,0,0.9) /*blur value is 5px*/Copy the code

Box-shadow: 10px 10px 10px rgba(0,0, 0.9)/*blur value is 10px*/Copy the code

Box-shadow: 10px 10px 15px rgba(0,0,0,0.9)/blur value 15px/

4. [optional]

Spread is the radius of the shadow. I saw some questions on the Internet about the difference between spread and blur. In fact, it is very simple: Blur describes the blur radius, and its value determines the blur degree of the shadow. Spread is the size of the area covered by the shadow, which are two different concepts.

Box-shadow: 10px 10px 10px 5px rgba(0,0,0,0.9); /* Shadow radius is 5px*/Copy the code

Box-shadow: 10px 10px 10px 15px rgba(0,0,0,0.9); /* Shadow radius is 15px*/Copy the code

5. [Optional]

The color of the shadow can be expressed in any color unit. When we do not set the color value, the default is black.

Box-shadow: 10px 10px 10px 5px (255,0,0); /* Red shadow, RGB for */Copy the code

6. Inset [Optional]

By default, the shadows we set are external shadows, and this property converts external shadows to internal shadows.

box-shadow: 10px 10px 10px 5px blue; /* Defaults to external shadow */Copy the code

box-shadow: 10px 10px 10px 5px blue inset; /* Switch the outer shadow to the inner shadow */Copy the code

practice

Now that we know about box-shadow, we can do some interesting things with it. For example, to animate a shadow, add: hover pseudo-element to an element to enlarge the shadow when the mouse hovers over the element

.test{ width: 100px; height: 100px; background: yellow; margin: 100px auto; border-radius: 50%; Box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.9); transform: scale(1); Transition: box-shadow 0.6s, transform 0.5s; } .test:hover{ width: 100px; height: 100px; background: yellow; margin: 100px auto; border-radius: 50%; Box-shadow: 0px 0px 50px 15px rgba(0,0,0,0.9); The transition: box - 0.5 s shadow; }Copy the code

Source link: my.oschina.net/u/4188243/b…