本文向大家描述一下DIV style一些特殊效果，主要包括cursor：設(shè)置DIV上光標(biāo)的樣式，filter：濾鏡效果以及其他效果。

DIV style一些特殊效果

1、cursor:設(shè)置DIV上光標(biāo)的樣式。

2、clip:設(shè)置剪輯矩形。

例：

代碼

<div style="font:16px宋體;width:600px;height:200px;  
cursor:help;clip:rect(0px100px20px0px);  
line-height:20px;overflow:auto;  
background-color:Yellow;position:absolute">div樣式測(cè)式howareyou.</div> 
 

說明：clip:rect(toprightbottomleft);設(shè)置上下左右的距離,但此時(shí)要把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> 
 

說明：設(shè)置透明度:opacity：value(FF專用,value的取值為0至1之間的小數(shù))，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)';

*以下是濾鏡綜合的例子，將以下代碼復(fù)制到一個(gè)網(wǎng)頁(yè)文件中就可看到其效果，所以就不要加以說明了。

例： 

<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的光的強(qiáng)度0--100；此時(shí)不能設(shè)DIV的背景色。  
 
</div> 
 
<div style="filter:mask(color='ff0000');width:100px;  
 
height:100px;text-transform:uppercase;color:black;"> 
 
mask效果：<br/> 
 
沒有明顯效果,不能設(shè)背景色。  
 
</div> 
 
<div style="filter:shadow(color='0000ff',direction='100');  
 
width:100px;height:100px;"> 
 
</div>   

【編輯推薦】

1. DIV style常用屬性
2. IE6.0對(duì)padding的解讀分析
3. 揭露CSS中margins折疊現(xiàn)象內(nèi)幕
4. 七大CSS選擇符用法說明
5. 技術(shù)分享 如何使用CSS控制超鏈接文字樣式