DIV CSS 佈局教程網

本文向大家描述一下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>   

【編輯推薦】

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