Introduction to how CSS3 shadows are used

First, Border shadow

Standard syntax:

Box-shadow:h-offset v-offset blur spread color [inset], ...

[Offset to right is positive, negative on top left]

A, if there are multiple shadows, separated by commas, and then stacked down, first written on the top

b, if there is inset, it is the inner shadow, but note: If you simply add inset to the original shadow, the Shadow is inside the opposite side, not simply flipping the reverse.

C, extended spread the greatest benefit and effect is when negative values to shield or reduce interference to the remaining 3 sides

D, if the inner div is filled with color, the inner shadow is shaded by a partially colored part, but the inner shaded div is set to relative and Z-index is set to 1 to display the shadowed inner shadow.

[This is less, and there are many limitations]

Second, the text shadow

Standard syntax:

Text-shadow:h-offset v-offset blur color, ...

[Offset to right is positive, negative on top left]

A, if there are multiple shadows, separated by commas, and then stacked down, first written on the top

Effect two: Apple Style Effect

. Demo4 {color: #000;
text-shadow:0 1px 1px #fff; }

Effect three: Photoshop Emboss Effect

. demo5 {color: #ccc;
Text-shadow: -1px-1px 0 #fff, 1px 1px 0 #333, 1px 1px 0 #444;}

Effect Four: Blurytext Effect

. demo6 {color:transparent;
text-shadow:0 0 5px #f96;}

Effect VII: 3D text effect

. demo10 {color: #fff;
text-shadow:1px 1px RGBA (197, 223, 248,0.8), 2px 2px Rgba (197, 223, 248,0.8), 3px 3px Rgba (197, 223,