CSS3 Box-shadow Quick Tour

The Box-shadow property adds one or more shadows to the box. This CSS3 property is commonly used, such as box shadows, button states, and so on, but do you know and remember the function and usage of each parameter?

Show

Source: Http://codepen.io/yisi/pen/sDBwC

Syntax: Http://www.w3cplus.com/content/css3-box-shadow

Motion diagram:

Tips for use

1	Box-Shadow: H-shadow v-shadow blur spread color Inset;

The first value controls the horizontal offset, positive value to the right, negative to left

The second value controls the vertical offset, positive values down, negative values upward

The third value controls the blur radius, does not allow negative values, and the larger the value the more blurred the edge of the shadow

The fourth value controls the extent of the extension

The last value controls the shadow color, and omitting inherits the color of the color property

Multiple shadows can be added, separated by commas

You can use inset to set the inner shadow

Are you going to do it?