CSS3 Box-shadow Shadow Graphics tutorial

This article mainly introduces the CSS3 Box-shadow Shadow (outer Shadow and outer glow), through the five Tests through the picture to show the different positions of the shadow different effects, the need for friends can refer to the next

Basic notes:

Outer shadow: Box-shadow:x axis y-axis Rpx color;

Property descriptions (in order): Shadow's X-axis (negative values can be used) Shadow's y-axis (negative values can be used) shadow blur value (size) Shade color

Inner shadow: box-shadow:x axis y-axis Rpx color inset;

The default is an outer shadow inner shadow: Inset can be set to an inner shadow

Note (PS): This property is used for box models such as (P,P,H1,H2,H3,H4,H5,H6, etc.) is not used to set the text shadow if you set the text shadow refer to Knowledge points: Text-shadow (same)

Because it is a new attribute, in order to be compatible with the major browsers and support the lower versions of these master browsers, we need to write the name of the attribute when using the Box-shadow attribute on the main browser -webkit-box-shadow . The Firefox browser needs to be written -moz-box-shadow in the form of open Gate browser -o-box-shadow ie>9-ms-box-shadow

Basic exercises:

In order to better understand the characteristics of Box-shadow, do a few small tests: (in order to facilitate directly in the tag nested style)

Test 1: <p style= "box-shadow:0 0 10px #f00; border:1px solid Green "></p> box-shadow:0 0 10px #f00 (due to the fact that the x-axis and y-axis movement setting values are within the radius of action, color)

Test 2: <p style= "box-shadow:4px 4px 10px #f00; border:1px solid Green "></p> box-shadow:4px 4px 10px #f00; with test 1 different x-axis and y-axis changed positive values (positive value right down) so that's it.

Test 3:<p style= "box-shadow:-4px-4px 10px #f00; border:1px solid Green "></p> box-shadow:-4px-4px 10px #f00; Unlike test 2, the x-axis and y-axis are changed to negative values (negative values to the left upwards) so this becomes

Similarly: You can test the next positive value, a negative effect, here do not test ...

Test 4:<p style= "box-shadow:-10px 0px 10px red,/* Left Shadow */
0px-10px 10px #000,/* Top Shadow */
10px 0px 10px Green,/* Right Shadow */
0px 10px 10px blue; "/* Bottom Shadow */
</p>

You see this kind of code will feel messy, but after you see it, you'll understand how it's done. The x-axis and y-axis position and color value and shadow value, (separated by commas) practice a few more times.

Test 5:--inner Shadow <p style= "box-shadow:0px 0px 10px red inset; border:1px solid Green "></p> box-shadow:0px 0px 10px red inset; The only difference from the above is the addition of a inset other properties are the same as the outer shadow

Hundred change not from its pope, practice can be familiar with, understand the principle, arbitrary rewrite, in conjunction with CSS3 animation effect, flash layer (word) are very simple to achieve. Hope to be of help to you.