css background color gradient compatible writing method_html/css_WEB-ITnose

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

Instructions: Linear-gradient click here for specific usage.

ie filter: filter

linear-gradient is not supported below ie9, so for ie6 - ie8 we can use filters to solve the problem, the code is as follows:

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

Since filter is a private attribute of ie, we need to handle the filter effect separately for ie9. The code is as follows:

:root {filter:none;}

Summary:

To sum up, the compatible writing methods of linear gradient are 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, we often encounter the combination of rounded corners and gradients. If you use the above writing method, there will be bugs under ie9 ( The background color cannot be completely cut out under IE9), the solution is SVG, click here for details.