美文网首页
css颜色过度效果(兼容ie6以上浏览器)

css颜色过度效果(兼容ie6以上浏览器)

作者: goodluckall | 来源:发表于2019-08-01 10:47 被阅读0次
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(190, 251, 223, 0.17) 41%, rgba(96, 246, 176, 0.17) 100%, rgba(96, 246, 176, 0.33) 101%);
                /* FF3.6-15 */
                background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(190, 251, 223, 0.17) 41%, rgba(96, 246, 176, 0.17) 100%, rgba(96, 246, 176, 0.33) 101%);
                /* Chrome10-25,Safari5.1-6 */
                background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(190, 251, 223, 0.17) 41%, rgba(96, 246, 176, 0.17) 100%, rgba(96, 246, 176, 0.33) 101%);
                /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#5460f6b0', GradientType=0);
                /* IE6-9  GradientType=0,0竖向,1纵向*/
            }
        </style>
    </head>
    <body>
        <div style="width: 100%;height: 600px;"></div>
    </body>
</html>

其他参考:https://www.runoob.com/css3/css3-gradients.html

相关文章

网友评论

      本文标题:css颜色过度效果(兼容ie6以上浏览器)

      本文链接:https://www.haomeiwen.com/subject/zbtqdctx.html