DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS的濾鏡效果(1)
CSS的濾鏡效果(1)
編輯:CSS詳解     
在CSS中還有一樣功能:濾鏡.... 
濾鏡可以針對圖形或者文字來增添一些效果... 
如果在搭配之前所寫的定位以及文字的性質... 
可以在不使用圖檔的情況下.. 
讓網頁有很棒的效果,而且浏覽又快速... 
CSS的濾鏡大概有14種... 
較常以套用在: 
<body>...</body>,<img>,<div>...</div>,<span>...</span>....等卷標上 
先介紹幾種濾鏡: 

alpha 濾鏡 

設定性質 
opacity:透明度(開始) 0-100 
finishopacity:透明度(結束) 0-100 
style:樣式 0|1|2|3 依序是 平均|直線|圓形|矩形 
startX:開始X 
startY:開始Y 
finishX:結束X 
finishY:結束Y 

此濾鏡可以使組件有透明的效果.... 

blur 濾鏡 

設定性質 
add 顯示元對象 0|1 依序是 不要|要 
direction:影像移動方向 0-359 (一個圓) 
strength:模糊像的暈開幅度 0-10 

此濾鏡可以使原件產生模糊影像... 

chroma 濾鏡 

設定性質 
color:指到不顯示的顏色 colorvalue 

此濾鏡可將指定的顏色不顯示... 

dropshadow 濾鏡 

設定性質 

color:陰影顏色 colorvalue 
offx:陰影位移X 
offy:陰影位移Y 
positive:陰影透明度 0表示透明 

此濾鏡可使組件產生陰影... 

fliph 濾鏡與 flipv濾鏡 

不用設定,fliph會產生水平靜射,flipv會產生垂直鏡射 

glow 濾鏡 

color:陰影顏色 
strength:陰影效果 1-255 

此濾鏡可使組件產生像是被顏色包圍的感覺,如:火焰字 

以上有7種濾鏡... 
使用的方式同CSS的套入一樣 
可以建成樣式文件、建在<head>...</head>之間、或者和Html的卷標寫在一起... 

如<img src="n.jpg" style="filter:glow(colot=red,strength=10"> 
或者在 
<head> 
<style> 
.style1 filter(color=red,strength=10) 
</style> 
</head> 

-
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved