DIV样式中几个特殊效果实现【DOC精选】.docVIP

你对DIV样式中的一些特殊效果是否熟悉，这里向大家简单描述一下，主要包括cursor:设置DIV上光标的样式，clip:设置剪辑矩形以及filter:滤镜效果等，相信你一定会对本文介绍感兴趣。 本文和大家重点讨论一下DIV样式中一些特殊效果的实现，比如cursor:它可以设置DIV上光标的样式，clip:可以设置剪辑矩形，而DIV样式filter:可以实现滤镜效果，相信本文介绍一定会让你有所收获。 DIV样式中一些特殊效果 1、cursor:设置DIV上光标的样式。 2、clip:设置剪辑矩形。 例： Code div style=font:16px宋体;width:600px;height:200px; ? cursor:help;clip:rect(0px100px20px0px);line-height:20px; ? overflow:auto;background-color:Yellow;position:absolute? div样式测式howareyou. ? /div? ? 说明：clip:rect(toprightbottomleft);设置上下左右的距离,但此时要把position指定为absolute。看以上效果。 3、filter:此DIV样式可以实现滤镜效果。 例： Code? divstyledivstyle=width:450px;height:200px;background-color:Blue;? dividdivid=”tdiv”style=background-color:Yellow; ? filter:alpha(opacity=50);opacity:0.5; ? float:left;width:200px;height:200px;? /div? divstyledivstyle=background-color:Yellow;width:200px; ? height:200px;float:left;? /div? /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); *以下是滤镜综合的例子，将以下代码复制到一个网页文件中就可看到其效果，所以就不要加以说明了。 例： 滤镜综合例子 styletypestyletype=text/css? #paneldivdiv ? {}{ ? background-Color:yellow; ? height:200px; ? width:200px; ? } ? /style? ? dividdivid=paneldivstyle=width:230px;height:2300px; ? background-color:Blue;? divstyledivstyle=filter:alpha(opacity=0,finishopacity=80,style=1, ? startx=10,starty=10,FinishX=100,FinishY=100);opacity:0.5;? alpha效果:br/? /div? ? divstyledivstyle=filter:blur(add=1,direction=100,strength=5);? blur效果：br/? add为1代表字有阴影，0代表字全部模糊。 ? abcdefghijklmnopqrstuvwxyz ? /div? divstyledivstyle=filter:chroma(color=#ff0000) onclick=this.style.backgroundColor=#ff0000 ? ondblclick=this.style.backgroundColor=black;? chroma效果：br/? 原为黄色，单击变成红色变成透明，双击变成黑色。 ? /div? divstyledivstyle=filter:FlipH;? fliph效果：br/? ABCDEFGHbr/? IJKLMNOPbr/? 此属性在设置宽高后有效 ? /div? divstyledivstyle=filter:FlipV;? flipv效果：br/? ABCDEFGHbr/? IJKLMNOPbr/? 此属性在设置宽高后