本文向大家描述一下DIV style一些特殊效果，主要包括cursor：设置DIV上光标的样式，filter：滤镜效果以及其他效果。
DIV style一些特殊效果
1、cursor:设置DIV上光标的样式。
2、clip:设置剪辑矩形。
例：
代码
- <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 style="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><div style="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="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;">
- chroma效果：<br/>
- 原为黄色，单击变成红色变成透明，双击变成黑色。
- </div>
- <div style="filter:FlipH;">
- 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;">
- </div>
【编辑推荐】
