Cross-browser CSS shadow Implementation Method

Shadow is one of the most commonly used CSS effects. The CSS3 standard has added the shadow attribute. Next we will discuss the implementation of shadow in various browsers. CSS3 shadow

Use in CSS3Box-shadowThe basic syntax is as follows:

Box-shadow: 3px 3px 4px #000;

In the above style, the first two "3px" indicate the offset of the shadow on the xy coordinate axis, the positive direction of the X axis to the right, and the positive direction of the Y axis to the downward. This coordinate is a little different from what we usually use. In Firefox, Webkit, and other browsers, to achieve the highest efficiency, we recommend that you use a private hack to Implement CSS shadow, which can be written as follows:

-Moz-box-shadow: 3px 3px 4px #000;
-Webkit-box-shadow: 3px 3px 4px #000;

Implementation of CSS shadow in IE browser

In IE, we can only use a filter to realize the shadow of pure CSS. To achieve the same effect as the above style, you can write as follows:

/* For IE 5.5-7 */
Filter: progid: DXImageTransform. Microsoft. Shadow (Strength = 4, Direction = 135, Color = '#000000 ');
/* For IE 8 */
-Ms-filter: "progid: DXImageTransform. Microsoft. Shadow (Strength = 4, Direction = 135, Color = '#000000 ')";

In the shadow filter of IE, Strength indicates the shadow concentration, and Direction indicates the shadow angle. To facilitate understanding, we can understand that light is taken from the 135 ° Direction of the polar coordinate to produce a shadow.

Integrated code

When integrating hack with the same effect, we follow the order of compatibility from strong to poor, that is, the standard code is written at the beginning.

Box-shadow: 3px 3px 4px #000;
-Moz-box-shadow: 3px 3px 4px #000;
-Webkit-box-shadow: 3px 3px 4px #000;
Filter: progid: DXImageTransform. Microsoft. Shadow (Strength = 4, Direction = 135, Color = '#000000 ');
-Ms-filter: "progid: DXImageTransform. Microsoft. Shadow (Strength = 4, Direction = 135, Color = '#000000 ')";

Address: http://blog.imbolo.com/cross-browsers-css-shadow/