DIV式样总结(二)

说明：设置透明度:opacity ：value (FF 专用,value 的取值为0 至1 之间的小数) ，filter:alpha(opacity=value)(IE 专用，value 取值：0 至100) 。

如果要有JavaScript 改变DIV 的透明度可用下面的方法：

FF 中：document.getElementById('tdiv').style.opacity='0.9';

IE 中：document.getElementById('tdiv').style.filter='alpha(opacity=90)';

?

*? 以下是滤镜综合的例子，将以下代码复制到一个网页文件中就可看到其效果，所以就不要加以说明了。

例：

?

< style? type ="text/css" >
???????#paneldiv?div
??????? {
??????????background-Color : yellow ;
??????????height : 200px ;
??????????width : 200px ;
??????? }
</ style >

< div? id ="paneldiv" ?style ="width:230px;height:2300px;
background-color:Blue;" >
???? < div? style ="filter:alpha(opacity=0,finishopacity=80,style=1,
startx=10,starty=10,FinishX=100,?FinishY=100);opacity:0.5;" >
?????alpha效果: < br? />
???? </ div >

???? < div? style ="filter:blur(add=1,direction=100,strength=5);" >
??????????????blur效果： < br? />
??????????????add为1代表字有阴影，0代表字全部模糊。
??????????????abcdefghijklmnopqrstuvwxyz
???? </ div >
???? < div? style ="filter:chroma(color='#ff0000')" ?onclick ="this.style.backgroundColor='#ff0000'" ?ondblclick ="this.style.backgroundColor='black';" >
???????chroma效果： < br? />
???????原为黄色，单击变成红色变成透明，双击变成黑色。
???? </ div >
???? < div? style ="filter:FlipH;" >
??????????????fliph效果： < br? />
??????????????ABCDEFGH < br? />
??????????????IJKLMNOP < br? />
??????????????此属性在设置宽高后有效
???? </ div >
???? < div? style ="filter:FlipV;" >
??????????????flipv效果： < br? />
??????????????ABCDEFGH < br? />
??????????????IJKLMNOP < br? />
??????????????此属性在设置宽高后有效
???? </ div >
???? < div? style ="filter:gray;" >
?????????gray效果： < br? />
?????????abcdefghijklmn
???? </ div >
???? < div? style ="filter:invert;?text-transform:uppercase;color:Red;" >
???????????????invert效果： < br? />
???????????????背景色变成相反颜色，如黑变成白。
???? </ div >
???? < div? style ="filter:wave(add=0,freq=3,lightstrength=20,phase=3,strength=10)" >
???????????????wave效果： < br? />
???????????????Add：一般为1，或0。(0表示上下波浪)?
　　???????????Freq：变形值。(指定多少个波浪)
　　???????????LightStrength：变形百分比。(变形后的阴影。)
　　???????????Phase：角度变形百分比。(弯曲的角度)??Strength：变形强度。(数值越大，DIV变形就越大。)
???? </ div >
???? < div? style ="filter:Xray" >
?????????xray效果： < br? />
?????????sfasdfasdfasdfsadf
???? </ div >
< div? style ="filter:?progid:DXImageTransform.Microsoft.Gradient
(GradientType=0,?StartColorStr='#B5CCFA',?EndColorStr='#ffffff');" >
???????progid:dximagetransform.microsoft.gradient效果： < br? />
???????endendendendendendendendendend
???? </ div >
</ div >
< div? style ="filter:DropShadow(color='#666666',OffX='3',OffY='3',
Positive='1');width:200px;height:200px;" >
?????????dropshadow效果： < br? />
?????????此效果只有在不设置背景色时有效，这时Color指定的将成为背景色。此时背上的字将是清晰的。positive为0时color将成为背景色，为1时color只是文本投影的颜色。
???? </ div >
< div? style ="filter:Glow(color='#0000ff',strength='3');
width:100px;height:100px;" >
?????????glow效果： < br? />
?????????strength的光的强度0--100；此时不能设DIV的背景色。
???? </ div >
< div? style ="filter:mask(color='ff0000');?width:100px;
height:100px;text-transform:uppercase;color:black;?" >
???????????mask效果： < br? />
???????????没有明显效果,不能设背景色。
??? </ div >
??? < div? style ="filter:shadow(color='0000ff',direction='100');
width:100px;height:100px;" >
???????????????shadow效果： < br? />
???????????????abcdefghijklmn
??? </ div >
??? < div? style ="filter:Xray;width:100px;height:100px;
background-color:red;" >
???????xray效果： < br? />
??????sfasdfasdfasdfsadf
??? </ div >
??? < div? style ="filter:?progid:DXImageTransform.Microsoft.Gradient
(GradientType=100,?StartColorStr='#B5CCFA',?EndColorStr='#ffffff');width:100px;height:100px;" >
????????渐变效果。
????????endendendendendendendendendend
?? </ div >
?? < div? style ="filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=5);width:100px;height:100px;" >
???????????????lsksalsslalalalalalalal
? </ div >
? < div? style ="filter:alpha(opacity=100,?finishOpacity=0,style=2);
width:100px;?height:100px;background-color:Yellow;" >
</ div >