Compatible with the CSS shadow effect of multiple browsers. Simulate box-shadow (Shadow) in css3 in IE)

Bytes Time: Source: Unknown Author: Big treasure Click: 641 Secondary reading tool: Font: big, medium, small, irrelevant

In the web page UI, the projection effect is a very common performance. For example, kaixin.com's avatar modification effect:

However, in the css2 era, we mostly use images to achieve similar effects, or use other CSS attributes to simulate shadow effects. However, now, the rise of css3 makes this problem no longer a problem, this article will show how to achieve cross-browser box shadow effect.

Ii. Standard Methods

The standard method of course refers to the method of using css3, which should be known by many peers, see the followingCode:

 
. Shadow {-moz-box-Shadow: 3px 3px 4px #000;-WebKit-box-Shadow: 3px 3px 4px #000; box-Shadow: 3px 3px 4px #000 ;}
 

Interpreted: Horizontal offset of 3 pixels, vertical offset of 3 pixels, blur of 4 pixels, color is pure black.

If we apply the class shadow containing the above style to the image, the following results will be produced (captured from firefox3.6 ):

3. What about ie?

What should I do with the IE browser that currently supports CSS 3 like shit? The box-shadow attribute is like a lantern on a Christmas tree in IE.
Fortunately, the IE browser has an IE shadow filter, which is private to the IE browser. It can simulate the box shadow effect and use code similar to the following:

 
. Shadow {/* for IE 8 */-MS-filter: "progid: DXImageTransform. microsoft. shadow (strength = 4, ction = 135, color = '# 000000') ";/* for IE 000000-7 */filter: progid: DXImageTransform. microsoft. shadow (strength = 4, direction = 135, color = '#000000 ');}
 

Apply the shadow class to the image. The result is as follows (from IE 6 ):

Although the results are far behind modern browsers such as Firefox and chrome, they can be used together.

Iv. Style Synthesis

The following code:

 
. Shadow {-moz-box-Shadow: 3px 3px 4px #000;-WebKit-box-Shadow: 3px 3px 4px #000; box-Shadow: 3px 3px 4px #000; /* for IE 8 */-MS-filter: "progid: DXImageTransform. microsoft. shadow (strength = 4, ction = 135, color = '# 000000') ";/* for IE 000000-7 */filter: progid: DXImageTransform. microsoft. shadow (strength = 4, direction = 135, color = '#000000 ');}
 

For more information about the cross-browser support of css3 attributes, see here (css3please.com ).

V. browser support

• Firefox 3.5 +
• Safari 3 +
• Google Chrome
• Opera 10.50
• Internet Explorer 5.5

(Responsible editor: great treasures)

-------------------------------------------------- Simulate box-shadow (Shadow) in css3 under IE)

Simulate box-shadow (Shadow) in css3 in IE and use the shadow (Shadow) filter of IE.

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

Note: The filter must be used together with the background attribute; otherwise, the filter becomes invalid. Simulate the box-shadow (Shadow) code in css3 in IE:

 
. Box-shadow {
 

 

Filter: progid: DXImageTransform. Microsoft. Shadow (color = '#969696', direction = 135, strength = 5);/* For IE6 */

Background-color: # Eee;

-Moz-box-Shadow: 2px 2px 5px #969696;/* Firefox */

-WebKit-box-Shadow: 2px 2px 5px #969696;/* WebKit */

Box-Shadow: 2px 2px 5px #969696;/* opera or ie9 */

}