Css background color gradient compatible writing, css writing

(Conversion) css background color gradient compatible writing, css writing

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.