DIV CSS 佈局教程網

◆以下是濾鏡綜合的例子，將以下代碼復制到一個網頁文件中就可看到其效果，所以就不要加以說明了。

例：

濾鏡綜合例子

<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;"> 
 

◆DIV樣式特殊效果之alpha效果

:<br/> 
</div> 
 
<divstyledivstyle="filter:blur(add=1,direction=100,strength=5);"> 
 

◆DIV樣式特殊效果之blur效果

：<br/> 
add為1代表字有陰影，0代表字全部模糊。  
abcdefghijklmnopqrstuvwxyz  
</div> 
<divstyledivstyle="filter:chroma(color='#ff0000')  
"onclick="this.style.backgroundColor='#ff0000' 
"ondblclick="this.style.backgroundColor='black';"> 

◆DIV樣式特殊效果之chroma效果

：<br/> 
原為黃色，單擊變成紅色變成透明，雙擊變成黑色。  
</div> 
<divstyledivstyle="filter:FlipH;"> 

◆DIV樣式特殊效果之fliph效果

：<br/> 
ABCDEFGH<br/> 
IJKLMNOP<br/> 
此屬性在設置寬高後有效  
</div> 
<divstyledivstyle="filter:FlipV;"> 

◆DIV樣式特殊效果之flipv效果

：<br/> 
ABCDEFGH<br/> 
IJKLMNOP<br/> 
此屬性在設置寬高後有效  
</div> 
<divstyledivstyle="filter:gray;">