Gradient IE compatible processing, gradient ie

Gradient IE compatible processing, gradient ie

According to caniuse (http://caniuse.com/#search=gradient), rgba compatibility is IE10 and above.

 

 

Instance code:

1 <! Doctype html> 2 
 
Chrome browser effect:

 
IE8 browser effect (no gradient ):

 
Rgba compatibility processing:
1. parent {2 width: 400px; 3 height: 400px; 4 margin: 100px; 5 font-size: 20px; 6 color: # FF0000; 7 border: 1px solid red; 8 background: #000000; 9 background:-moz-linear-gradient (top, #000000 0%, # ffffff 100%); 10 background:-webkit-gradient (linear, left top, left bottom, color-stop (0%, #000000), color-stop (100%, # ffffff); 11 background:-webkit-linear-gradient (top, #000000 0%, # ffffff 100%); 12 background:-o-linear-gradient (top, #000000 0%, # ffffff 100%); 13 background:-ms-linear-gradient (top, #000000 0%, # ffffff 100%); 14 background: linear-gradient (to bottom, #000000 0%, # ffffff 100%); 15/* Key Attribute setting */16 filter: progid: DXImageTransform. microsoft. gradient (startColorstr = '#000000', endColorstr = '# ffff', GradientType = 0); 17}
 
Set the filter attribute to execute when the transparency of the last row does not work. filter: progid: DXImageTransform. microsoft. gradient is used for gradient, GradientType: read/write, set or retrieve the direction of the color gradient:
1: default value. Horizontal gradient.
0: vertical gradient.
Conclusion: IE9 and the following IE browser gradient compatibility have been completed.