Gradient gradient IE compatible processing method explained-CSS Tutorial-php.cn

Gradient gradient IE compatible processing method explained

高洛峰

Release： 2017-03-21 14:32:17

Original

2194 people have browsed it

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

Gradient gradient IE compatible processing method explained

Example code:

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>gradient 兼容性处理</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            .parent {
                width: 400px;
                height: 400px;
                margin: 100px;
                font-size: 20px;
                color: #FF0000;
                border: 1px solid red;
                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%);
            }
        </style>
    </head>

    <body>
        <div>
        </div>
    </body>

</html>

Copy after login

Chrome browser effect:

Gradient gradient IE compatible processing method explained

IE8 browser effect (no gradient):

Gradient gradient IE compatible processing method explained

rgba compatibility processing:

.parent {
                width: 400px;
                height: 400px;
                margin: 100px;
                font-size: 20px;
                color: #FF0000;
                border: 1px solid red;
                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=&#39;#000000&#39;, endColorstr=&#39;#ffffff&#39;, GradientType=0);
            }

Copy after login

The purpose of setting the filter attribute is the previous line Executed when the transparency does not work, filter: progid:DXImageTransform.Microsoft.gradient is used to make gradients, GradientType: readable and writable, set or retrieve the direction of the color gradient:
　1: Default value. Horizontal gradient.
　0: Vertical gradient.

Summary: So far, the compatibility processing of IE9 and the following IE browsergradient has been completed.

The above is the detailed content of Gradient gradient IE compatible processing method explained. For more information, please follow other related articles on the PHP Chinese website!