渐变效果实现-CSDN博客

本文链接：https://blog.csdn.net/iteye_15826/article/details/81793442

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
    <HEAD>
        <TITLE>渐变效果测试</TITLE>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
        .upToDown {
            /*
            FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#FFCC00, endColorStr=#000000);
            */
            FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#FFD700, endColorStr=#FFFFFF);
        }

        .leftToRight {
            FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1, startColorStr=#FFD700, endColorStr=#FFFFFF);
        }

        .leftupToRightdown {
            FILTER: progid:DXImageTransform.Microsoft.Alpha(style=1, opacity =45, finishOpacity=100, startX=50, finishX=100, startY=50, finishY=100);
            BACKGROUND-COLOR: #FFCC00;
        }
        </style>
    </HEAD>
    <BODY>
        <pre>

        一、从上至下渐变 <input type="button" οnclick="document.body.className='upToDown'" value="从上至下渐变" />
        body{
            FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FFCC00,endColorStr=#000000);
        }

        二、从左往右渐变 <input type="button" οnclick="document.body.className='leftToRight'" value="从上至下渐变" />
        body{
            FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#FFCC00,endColorStr=#000000);
        }

        三、从左上右下渐变 <input type="button" οnclick="document.body.className='leftupToRightdown'" value="从上至下渐变" />
        body{
            FILTER:progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100);
            BACKGROUND-COLOR:#FFCC00";
        }

        一、div渐变 <input type="button" οnclick="document.getElementById('div_main').className='upToDown'" value="从上至下渐变" />
        body{
            FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FFCC00,endColorStr=#000000);
        }

         </pre>
         <div id="div_main" style=" border:1px solid pink; width: 500; height: 600"></div>

    </BODY>
</HTML>

渐变效果－－－仅支持IE