Introduction to the usage of Box-shadow in CSS3

In general, we use Box-shadow to set the box shadow, but some properties are not commonly used, this article will analyze the Box-shadow attribute one by one.
Grammar

CSS Code copy content to clipboard

E {box-shadow:inset x-offset y-offset blur-radius Spread-radius Color}  

　　

That

Object Selector {box-shadow: Projection mode x-axis offset y-axis offset shadow blur radius Shadow expansion radius shadow color}

Inset projection mode
This parameter is an optional value, and if no value is set, its default projection is an outer shadow, and if its unique value is "inset", its projection is the inner shadow;
X-offset
The offset in the horizontal direction;
Y-offset
The offset in the vertical direction;
Blur-radius Blur Radius
Optional, can only be integer, the greater the value of the shadow is more blurred;
Spead-radius Expansion radius
Optional, can be positive or negative, if negative, the entire shadow will be reduced;
Color Shadow Colors
Optionally, if you do not set a value, the browser will use its default color, the default color is generally black.

In general, we seldom use the two properties of inset and Spead-radius, and if you use these two properties, you can make a very cool effect.

• Text effects
• Picture Magnifier
• Juqery Focus Map
• Waterfall Flow
• AD Suspension Code
• Online customer Service
• Web navigation Menu

Introduction to the usage of Box-shadow in CSS3