來自：天極設(shè)計(jì)在線
編者的話：CSS 濾鏡并不是一個(gè)新鮮的話題，況且它對瀏覽器還挺挑剔，但是誰也不能否認(rèn)CSS 濾鏡的確是一個(gè)很有趣的小東西，短短一行代碼可以變化出各種各樣的濾鏡。我們特意精心整理了這個(gè)專題，為了照顧使用低版本瀏覽器的朋友，我們同時(shí)使用CSS濾鏡代碼實(shí)現(xiàn)效果和效果拷屏記錄以及代碼顯示三種方式向您詳細(xì)講述CSS 濾鏡�！ SS濾鏡實(shí)際上是CSS一個(gè)新的擴(kuò)展部分，使用這種技術(shù)簡單的語法可以把可視化的濾鏡和轉(zhuǎn)換效果添加到一個(gè)標(biāo)準(zhǔn)的HTML元素上，例如圖片、文本、以及其他一些對象，為頁面添加一些豐富的變化。如果您有一些腳本語言的基礎(chǔ)，能夠把濾鏡效果與SCRIPT小程序做一些結(jié)合，可以擁有一個(gè)CSS FILTER+ SCRIPT建立的強(qiáng)大的動態(tài)交互文檔工具�！ ≌埓蠹蚁瓤聪旅娴睦�，這里可沒有用什么Photoshop之類的圖象軟件，只是用了一行短短的CSS濾鏡代碼，不信的話大家可以用右鍵看看它們的圖片名字，都是相同的一張圖片：
注：只有IE4.0/NC6.0以上的瀏覽器支持CSS濾鏡效果，如果您的瀏覽器看不到上面的效果，請看下面的效果拷屏記錄。（為了照顧使用低版本瀏覽器的朋友，我們將同時(shí)提供CSS濾鏡代碼實(shí)現(xiàn)效果和效果拷屏記錄）
使用CSS濾鏡的方法很簡單，只要遵守下面的基本語法規(guī)則行了：filter:filtername(parameters) 即 filter:濾鏡名稱（參數(shù)）下面我們將詳細(xì)講述每種濾鏡的使用方法和精彩效果，大家還可以研究一下，將他們組合起來，得出各種曼妙的效果。
濾鏡效果
功能描述
Alpha
設(shè)置不同的透明度變化效果
Blur
建立模糊效果
DropShadow
建立一種偏移的影象輪廓，即投射陰影
FlipH
水平翻轉(zhuǎn)
FlipV
垂直翻轉(zhuǎn)
Glow
為對象的邊界增加色彩光效
Gray
將圖片以灰度形式顯示
Invert
將色彩、飽和度以及亮度值完全反轉(zhuǎn),類似底片效果
Light
在一個(gè)對象上進(jìn)行燈光投影
Mask
為一個(gè)對象建立彩色透明遮罩
Shadow
為對象建立輪廓的影效果
Wave
在X軸和Y軸方向利用正弦波打亂圖片
Xray
只顯示對象的輪廓具體的應(yīng)用有兩種方法：1、 先定義好CSS ，再在頁面中需要的對象上使用預(yù)先定義好的CSS，實(shí)際上CSS的設(shè)置對話框里已經(jīng)預(yù)先將這些濾鏡的語法設(shè)置好了，我們只需填上適合的具體參數(shù)即可： 2、直接在支持CSS濾鏡效果的HTML控件元素上編寫CSS filter代碼�！ ∷^的HTML控件元素是它們在頁面上定義了一個(gè)矩形空間，瀏覽器的窗口可以顯示這些空間。下面列出HTML合法的控件，相信大家都熟悉它們的用法，在這里不贅述了。細(xì)心的朋友可以看到我們文中所舉的實(shí)例都是使用這種方法實(shí)現(xiàn)的。
BODY
BUTTON
DIV
IMG
INPUT
MARQUEE
SPAN
TABLE
TD
TEXTAREA
TFOOT
TH
THEAD
TR
- TEL：131 7970 3111
-
慧網(wǎng)微信
- 掃描二維碼
- 關(guān)注邳州在線
-
手機(jī)網(wǎng)站
- 手機(jī)掃描二維碼
- 進(jìn)入手機(jī)站
網(wǎng)站地圖
付款方式