CSS3 box-shadow (shadow and shadow)-small knowledge description, css3box-shadow

CSS3 box-shadow (shadow and shadow)-small knowledge description, css3box-shadow
Basic description:

Shadow:Box-shadow: X axis Y axis Rpx color;

Attribute description (in sequence ):The X axis of the Shadow (negative value can be used) the Y axis of the Shadow (negative value can be used) the color of the Shadow blur value (size ).

Inner Shadow:Box-shadow: X axis Y axis Rpx colorInset;

By default, it is an external shadow. inset can be an internal shadow.

Note (PS): This attribute is used in box models such as (div, p, h1, h2, h3, h4, h5, h6, etc.). IfTo set text shadow, see text-shadow.(Likewise)

Because it is a new property, to be compatible with mainstream browsers and support earlier versions of these main browsers, when using the box-shadow attribute on mainstream browsers, we need to write the attribute name in the form of-webkit-box-shadow. The Firefox Browser needs to be written in the form of-moz-box-shadow.

Openg browser-o-box-shadow IE> 9-ms-box-shadow

Basic description:

To better understand the features of box-shadow, perform a few small tests: (to facilitate nested styles directly in the label)

Test 1: <div> box-shadow: 0 0 10px # f00; border: 1px solid green "> </div> box-shadow: 0 0 10px # f00 (because it is not set to move the X axis and Y axis, the value will be in its own Radius Range, color)

 

Test 2: <div> box-shadow: 4px 4px 10px # f00; border: 1px solid green "> </div> box-shadow: 4px 4px 10px # f00; different from the test, the X axis and Y axis change (positive value to the right ).

 

Test 3: <div> box-shadow:-4px-4px 10px # f00; border: 1px solid green "> </div> box-shadow: -4px-4px 10px # f00; the difference between the X axis and the Y axis is changed (the negative value is left-up), so it is changed to this

Similarly: You can test the effect of a positive value or a negative value. Here, we will not test it ........

Test 4: <div>/* Right shadow */
0px 10px 10px blue; "/* shadow below */> </div>

You can see that the code is messy, but after you see the film, you can see how it is done. It's nothing more than changing the position of the X axis and Y axis, the color value, and the shadow value, (separated by commas) Just practice several times

 

Test 5 :--Inner Shadow<Div> box-shadow: 0px 0px 10px red inset; border: 1px solid green "> </div> box-shadow: 0px 0px 10px red inset; the only difference from the preceding method is that an inset has the same attributes as the external shadow.

If you are familiar with the exercises and understand the principles, you can rewrite them at will. In combination with the animation effect of css3, The Flash layer (Word) is easy to implement .. Hope to help you ..