Cross-browser compatible CSS3 styles

Ie9+ only started to support some of the properties of CSS3, and for IE6-IE8 we were accustomed to using the Filter Filter property to implement it. IE4-IE9 supports filter notation filter:progid:DXImageTransform.Microsoft.xx (ATTR1=XX,ATTR2=XX)
IE8 introduced a special-ms-filter,ie that this is a correction to the old writing, more in line with the specification, the property value of this notation is only a pair of quotation marks, the effect of the previous:

-ms-filter: "progid:DXImageTransform.Microsoft.xx (ATTR1=XX,ATTR2=XX)"

It should be stated that if you want to use both filter and-ms-filter, write the-ms-filter in front of the filter.

However, this kind of writing life is not long, to IE10 filter and-ms-filter are no longer supported.
IE, starting with version 4.0, provides some built-in multimedia filter effects, using the following methods:
Syntax:
filter:filters 
 
Parameter:
Filters: The filter effect to use. Multiple filters are separated by a space.
 
Description:
Sets or retrieves the filter effect applied to the object.
to use this property, the object must have one of the height,width,position three properties. The mechanism of the
filter is extensible. Third-party filters can be developed and used.
This property is not available on the Mac platform. The
Corresponding script attribute is filter.
IE4.0 or later, the following 14 filters are supported:
Filter name     Description
Alpha     make HTML components transparent and progressive
Blur     Let HTML components The effect of wind-blown blur
Chroma     Make a color in an image transparent
DropShadow     Let HTML components have a drop shadow
Fliph     Let H tml element Flip level
FLIPV     Let HTML component flip vertically
Glow     Create a halo around a component
Gray     Turn a color picture into black and white
Invert     effects of photographic negatives that produce pictures
Light     Place a light on an HTML element
Mask     Use another HTML element to create a diagram on another component Masks like
Shadow     produce a more stereoscopic shadow
Wave     Let HTML elements produce wavy deformations in either horizontal or vertical direction
XRay     Generate HTML Component wheels Like an X-ray

First, Shadow Box-shadow

/* Standard Browser */
box-shadow:0px 0px 3px #333;
/*firefox*/
-moz-box-shadow:0px 0px 3px #333;
/*chrome*/
-webkit-box-shadow:0px 0px 3px #333;
/*ie 8*/
background: #fff;//Use this to avoid setting the font shadow
-ms-filter: "Progid:DXImageTransform.Microsoft.Shadow (color=# bbbbbb,direction=180,strength=4) ";
or
Filter:progid:DXImageTransform.Microsoft.Shadow (color= #bbbbbb, direction=180,strength=4);
/*ie7*/
background: #fff;//Use this to avoid setting the font Shadow
Filter:progid:DXImageTransform.Microsoft.Shadow (color= #bbbbbb , direction=180,strength=4);
or
Filter:shadow (color= #bbbbbb, direction=180,strength=4);

Basic syntax for the Shadow filter:


Filter:progid:DXImageTransform.Microsoft.Shadow (color= #bbbbbb, direction=180,strength=4);
Color represents the background of the projection, which can be expressed in English or 16, for example, if the projection background is blue, color=blue or #000000 should be set.
The direction parameter is used to set the projection direction, 0 for the 90 for the right, 180 for the lower, 270 for the left, and for the value 45 degrees, the default value is 270 degrees to the left.
The strength parameter sets the outer diffusion distance of the shadow.


If you want to leave a shadow in all four directions, you can write:
Filter:progid:DXImageTransform.Microsoft.Shadow (color= #bbbbbb, direction=0,strength=4)
Progid:DXImageTransform.Microsoft.Shadow (color= #bbbbbb, direction=90,strength=4)
Progid:DXImageTransform.Microsoft.Shadow (color= #bbbbbb, direction=180,strength=4)
Progid:DXImageTransform.Microsoft.Shadow (color= #bbbbbb, direction=270,strength=4);

Second, selector nth-child ()
CSS3 Child Selector IE8 cannot be recognized, you can use Xx:first-child + xx instead of using

/* Equivalent to Li:nth-child (1) */
ul li:first-child a {
    border-top:5px solid red;
}
/* equivalent to Li:nth-child (2) */
ul Li:first-child + li a {
    border-top:5px solid blue;
}
/* Equivalent to Li:nth-child (3) */
ul Li:first-child + Li + li a {
    border-top:5px solid green;
}