[Css] CSS background color gradient compatibility

Recently, linear gradient has been used in many projects, such as the background of the Form submission button and the title background of the data presentation, the previous practice was to cut the 1px image and then repeat-x. The following describes how to use css to achieve this effect.

Css3: linear-gradient

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

Note:Click here for details about linear-gradient.

Ie filter: filter

Linear-gradient is not supported under ie9, so we can use a filter to solve ie6-ie8. The Code is as follows:

.gradient{    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );}

Because filter is a private attribute of ie, we need to process the filter effect for ie9 separately. The Code is as follows:

:root {filter:none;}

Summary:

To sum up, the linear gradient Compatibility Statement 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;}

PS:

In actual projects, you will often encounter a combination of rounded corners and gradient. If you use the preceding method, there will be a bug in ie9 (the background color cannot be completely cut in ie9 ), the solution is SVG. Click here for details.