DIV樣式中一些特殊效果用法舉例

作者：universe 2010-08-17 10:16:37

開發前端

本文向大家介紹一下DIV樣式中一些特殊效果，主要包括cursor，clip和filter三部分內容，另外介紹了一下濾鏡綜合的例子，希望對你有所幫助。

上節我們介紹了DIV樣式中的常用屬性，那么你對DIV樣式的特殊效果是否了解，這里和大家簡單分享一下，相信本文介紹一定會讓你有所收獲。

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、DIV樣式特殊效果之filter:濾鏡效果。

例：

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

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

#p#◆DIV樣式特殊效果之gray效果

：<br/> 
abcdefghijklmn  
</div> 
<divstyledivstyle="filter:invert;text-transform:uppercase;color:Red;">

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

：<br/> 
背景色變成相反顏色，如黑變成白。  
</div> 
<divstyledivstyle="filter:wave(add=0,freq=3,lightstrength=20,phase=3,strength=10)">

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

<br/> 
Add：一般為1，或0。(0表示上下波浪)  
　　Freq：變形值。(指定多少個波浪)  
　　LightStrength：變形百分比。(變形后的陰影。)  
　　Phase：角度變形百分比。(彎曲的角度)Strength：變形強度。(數值越大，DIV變形就越大。)  
</div> 
<divstyledivstyle="filter:Xray">

◆DIV樣式特殊效果之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;">

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

<br/> 
此效果只有在不設置背景色時有效，這時Color指定的將成為背景色。  
 
此時背上的字將是清晰的。positive為0時color將成為背景色，為1時color只是文本投影的顏色。  
</div> 
<divstyledivstyle="filter:Glow(color='#0000ff',strength='3');  
width:100px;height:100px;">

#p#◆DIV樣式特殊效果之glow效果

<br/> 
strength的光的強度0--100；此時不能設DIV的背景色。  
</div> 
<divstyledivstyle="filter:mask(color='ff0000');width:100px;  
height:100px;text-transform:uppercase;color:black;">

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

：<br/> 
沒有明顯效果,不能設背景色。  
</div> 
<divstyledivstyle="filter:shadow(color='0000ff',direction='100');  
width:100px;height:100px;">

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

<br/> 
abcdefghijklmn  
</div> 
<divstyledivstyle="filter:Xray;width:100px;height:100px;  
background-color:red;">

◆DIV樣式特殊效果之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>

此上濾鏡效果主要參考：

http://www.lao8.org/html/8/2008-1-21/2008121182204.html

http://ce.sysu.edu.cn/hope/Education/ShowArticle.asp?ArticleID=2117；

【編輯推薦】

DIV樣式中常用屬性用法指導
使用Div CSS構架的三大好處
解析DIV布局之四大屬性用法
Div+CSS布局入門之寫入整體層結構與CSS
DIV+CSS開發過程中影響SEO的制作細節

責任編輯：佚名來源： cnblogs.com

DIV樣式