IE compatible CSS3 gradient notation

Before CSS3 to do the background color gradient can only take the method of adding a background image, but with the appearance of the css3:linear-gradient attribute, you can avoid the use of the method of adding a background image, thus optimizing performance. However , the Inear-gradient property is not valid under IE9, but it can be used in the IE filter method.

For example: black gradient to white, the code is as follows:

. Gradient { background: -moz-linear-gradient (Top, #000000 0, #ffffff 100%); background: - Webkit-gradient (linear, left top, left bottom, Color-stop (0%, #000000), Color-stop (100%, #ffffff)); background: -webkit-linear-gradient (Top, #000000 0, #ffffff 100%); background: - O-linear-gradient (Top, #000000 0, #ffffff 100%); background: -ms-linear-gradient (Top, #000000 0, #ffffff 100%); background:  Linear-gradient (to bottom, #000000 0, #ffffff 100%)

IE Filter: Filter

Linear-gradient below IE9 is not supported, so for IE6-IE8 we can use filters to solve, the code is as follows:

. Gradient { filter: progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #000000 ', endcolorstr= ' #ffffff ', gradienttype=0)

Because filter is the private property of IE, we need to handle the filter effect separately for IE9, the code is as follows:

{filter:None

In summary, the compatibility of linear gradients is as follows:

. Gradient{background:#000000;background:-moz-linear-gradient (Top, #000000 0, #ffffff 100%);background:-webkit-gradient (linear, left top, left bottom, Color-stop (0%, #000000), Color-stop (100%, #ffffff));background:-webkit-linear-gradient (Top, #000000 0, #ffffff 100%);background:-o-linear-gradient (Top, #000000 0, #ffffff 100%);background:-ms-linear-gradient (Top, #000000 0, #ffffff 100%);background:linear-gradient (to bottom, #000000 0, #ffffff 100%);Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #000000 ', endcolorstr= ' #ffffff ', gradienttype=0) ; }: root. Gradient{Filter:None;}

IE compatible CSS3 gradient notation