滤镜效果（Html+JavaScript）

 <style type="text/css"> #shadow { filter:Shadow(Strength=18, Direction=30, color=green); width:60%; font:bolder 80px 华文细黑; color:Red;} #blur { font:bolder 80px 华文细黑;color:darkblue; filter:blur(pixelradius=90.0, makeshadow='true'); width:60%; } #dropshadow { font:bolder 80px 华文细黑;color:darkblue; filter:dropshadow(color=#bbbbbb,OffX=10,OffY=10,Positive=true); width:60%; } #emboss { filter:progid:DXImageTransform.Microsoft.Emboss(); } #wave { filter:Wave(strength=5,freq=4,phase=20); } #glow { font:bolder 80px 华文细黑;color:darkblue; filter:glow(strength=10,color=red); width:200px;} </style> 阴影滤镜效果演示[Shadow]： <hr style="filter:alpha(opacity=80,style=1);color:red;"/> <font id="shadow">你好</font><br/> 模糊滤镜效果演示： <hr/> <span id="blur">你好</span><br/> 阴影滤镜效果演示[DropShadow]：<br/> <span id="dropshadow">你好</span><br/> <hr/> 浮雕效果演示[Emboss]：<br/> <img src="images/3.bmp" width=400px height=300px/> <img src="images/3.bmp" width=400px height=300px id="emboss"/> <hr/> 波形效果演示[Wave]：<br/> <img src="images/3.bmp" width=400px height=300px id="wave"/> <hr/> 辉光制作发热效果演示[Glow]：<br/> <span id="glow">你好</span> <hr/> <style> #idDiv{width:80%;height:80px;background-color:#FFFFFF;color:#FFFFFF;padding:6px;filter:progid:DXImageTransform.Microsoft.gradient();} #idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;} </style> <script> var sFilter="filter : progid:DXImageTransform.Microsoft.gradient("; function rdl_change(e){ var oCodeDiv=document.all("idCodeDiv"); var oDiv=document.all("idDiv"); with (document.all("idSel1")) var sValue1=options[selectedIndex].value; with (document.all("idSel2")) var sValue2=options[selectedIndex].value; with (document.all("idSel3")) var sValue3=options[selectedIndex].value; oDiv.filters[0].StartColorStr=sValue1; oDiv.filters[0].EndColorStr=sValue2; oDiv.filters[0].GradientType=parseInt(sValue3); oCodeDiv.innerText=sFilter+"startColorStr="+sValue1+",endColorStr="+sValue2+");"; } </script> <div id=idDiv><img src="images/rdl_sex.gif" style="float:left;">请从下方选择滤镜参数的值。</div> <br> <table><tr><td> <select id="idSel1" onchange="rdl_change();"> <option value="#FF0000FF">---开始颜色--- <option value="#FF0000FF">#FF0000FF <option value="#DF06F0FF">#DF06F0FF <option value="#800000FF">#800000FF </select> </td><td> <select id="idSel2" onchange="rdl_change();"> <option value="#FF000000">---结束颜色--- <option value="#FF000000">#FF000000 <option value="#00000000">#00000000 <option value="#5E0000FF">#5E0000FF </select> <select id="idSel3" onchange="rdl_change();"> <option value="1">---渐变方向--- <option value="1">1 <option value="0">0 </select> </td></tr></table> <div id=idCodeDiv>filter:progid:DXImageTransform.Microsoft.gradient();</div>