A detailed description of the use of the Box-shadow attribute in CSS3

Every time you use Box-shadow, you have to consult the data to achieve the corresponding effect, now summed up, convenient to view later.

First, the syntax:

E {box-shadow:inset x-offset y-offset blur-radius Spread-radius color};
E {box-shadow: Projection mode x-axis offset y-axis offset shadow blur radius Shadow expansion radius shadow color};

Second, value:

1. Shadow type: This parameter is optional, the default projection method is outer shadow, if its unique value "inset", is to turn the outer shadow into inner shadow;

2.x-offset: Refers to the shadow horizontal offset, the value can be positive negative, positive, the shadow on the right side of the object, negative value, the shadow on the left side of the object;

3. Y-offset: Refers to the vertical offset of the shadow, its value can also be positive negative, positive, shadow at the bottom of the object, negative values, the shadow at the top of the object;

4. Shadow Blur Radius: This parameter is optional, can only be positive, if its value is 0 o'clock, indicates that the shadow does not have a blur effect, the greater the value of the shadow edge is more blurred;

5. Shadow expansion radius: This parameter is optional, its value can be positive and negative, positive, then the entire shadow is extended, or vice versa, it shrinks

6. Shadow color: This parameter is optional, do not set any color, the browser will take the default color, but the browser default color is different, especially in the WebKit kernel of safari and chrome will be colorless, that is, transparent, it is recommended not to omit this parameter.

Third, compatible browser of the wording :

firefox4.0-
-moz-box-shadow: projection mode x-axis offset y-axis offset shadow blur radius Shadow extended radius shadow color;
Safari and Google chrome10.0-
-webkit-box-shadow: projection mode x-axis offset y-axis offset shadow blur radius Shadow extended radius shadow color;
firefox4.0+, Google Chrome 10.0+, oprea10.5+ and IE9
Box-shadow:  projection mode x-axis offset y-axis offset shadow blur radius Shadow extended radius shadow color;

Box-shadow and Text-shadow can use one or more projections, and if multiple projections are used, they must be separated by a comma ",".

Four,IE filter simulation Box-shadow shadow effect

Basic syntax: Filter:progid:DXImageTransform.Microsoft.Shadow (color= ' color value ', direction= shadow Angle (value), strength= shadow radius (value));

Note :

1. The filter must be used in conjunction with the Background property, otherwise the filter fails;
2. The color attribute in the filter must be complete and not abbreviated;
3. The shadow of the filter is calculated within the width of the height;
4. In the box shadow, box will automatically add Overflow:hidden;

the implementation Code of common Shadow :

<! DOCTYPE html>
See the specific results: