Add a shadow effect to the CSS span area

 To add a shadow effect to the CSS span area, you need to use the box-shadow property of CSS3 , which is a new feature of CSS3 and is also a standard "box" shadow effect property. Designers can easily use the box-shadow property parameters. For example, the shadow's deflection direction, diffusion range and color are used to design a variety of different styles of shadow effects for the span area. Now the box-shadow attribute has been supported by almost all mainstream browsers, and the detailed grammar rules are also comparable. easy.

CSS3 box-shadow property syntax rules

box-shadow:inset offset-x offset-y blur-radius spread-radius shadow color;

You can see that box-shadow has 6 parameters that can be set. The function of each parameter is to set the effect of a shadow, which is very important. We have a detailed introduction in " CSS3 box-shadow ", please refer to it yourself .

Add a shadow effect application example for the CSS span area

<span style="box-shadow:1px 1px 3px gray;margin-right:8px;">This is a gray shadow effect</span>
<span style="box-shadow:1px 1px 3px red;margin-right: 8px;">This is the red shadow effect</span>
<span style="box-shadow:1px 1px 3px blue;">This is the blue shadow effect</span>

The actual effect of the example

This is the gray shadow effect. This is the red shadow effect. This is the blue shadow effect.

In this example, we have prepared a total of three different span areas and added different shadow effects to them. The main difference lies in the different colors. The other parameter settings are the same. If there are more shadow changes, modify the others. You can see the gray, red, and blue span shadow effects are very obvious from the actual effect of the example . This is a very basic CSS3 box-shadow property applied to span to increase the shadow effect.