CSS3 How to create a shadow effect "code example"

I believe that when you browse the major websites, sometimes you will see a variety of images filled with three-dimensional image, such a picture effect can obviously attract people's attention. So the picture shows, some friends the first time must have thought is the PS art design out. Of course PS is a powerful tool, it is natural to make this effect.

But this article gives you a better and faster way to make shadows, that is, using CSS3 style attributes to create a variety of box shading, when we ourselves in the development of Web pages, Master CSS3 in the Box-shadow attribute can be produced a variety of shadow effect.

Below we pass the concrete Boxshadow Shadow effect instance code, give everybody detailed introduction:

<!    DOCTYPE html>
The above code we access through the browser, the effect as shown:



Then we combine the picture and the code to detail, DEMO1 display is the normal div block shadow effect, Box-shadow This attribute I believe you have noticed. Boxshadow means a box shadow. That is to say, in CSS3 we can achieve different shading effects by controlling the value of Box-shadow. The value of Box-shadow in 1 is 5px 5px 5px Black, which represents the amount of horizontal x-axis offset, the amount of vertical y-axis offset, the blur radius, and the shadow color.

The values for Box-shadow in Demo2 are 5px 5px 5px 5px black, respectively, which represents the amount of lateral offset of the x-axis, the amount of the y-axis vertical offset, the blur radius, the shadow radius, and the shadow color. The shadow radius here is positive!

The values of Box-shadow in Demo3 are 8px 8px 8px-8px black; The shadow radius here is negative!

The values of Box-shadow in Demo4 are 5px 0px 5px-5px black, -5px 0px 5px-5px black; the effect here is a bilateral shadow effect.

The value of Box-shadow in Demo5 is 8px 0px 8px-8px black; This shows a single-sided shadow effect.

If we set the blur radius to 0, it does not have a blur effect, and the larger the value, the more ambiguous it is. If we put the shadow radius value positive, the entire shadow expands, and if the value is negative, it shrinks.