How CSS makes the background color gradient compatible

Recently in the project, a lot of places have used linear gradient, such as: Form Submit button background, data display title background, etc., according to the previous practice is to cut 1px pictures and then repeat-x. I'll show you how to do this with CSS.

Css3:linear-gradient

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%);}

Description:linear-gradient Specific usage point this entry .

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:

: root {filter:none;}

Summarize:

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;}