DIV样式中几个特殊效果实现-div样式

本文和大家重点讨论一下DIV样式中一些特殊效果的实现，比如cursor:它可以设置DIV上光标的样式，clip:可以设置剪辑矩形，而DIV样式filter:可以实现滤镜效果，相信本文介绍一定会让你有所收获。

DIV样式中一些特殊效果

1、cursor:设置DIV上光标的样式。

2、clip:设置剪辑矩形。

例：

Code

<divstyledivstyle="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)';

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

例：

滤镜综合例子

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

【编辑推荐】