當(dāng)前位置：網(wǎng)站首頁(yè) >> 網(wǎng)站技術(shù) >>

網(wǎng)站制作中幾個(gè)常用的CSS濾鏡介紹

發(fā)布人：鄭州凱訊公司    發(fā)布日期：2015-03-03

本網(wǎng)頁(yè)展示了在網(wǎng)站制作中的幾個(gè)常用的CSS濾鏡(CSS filter)介紹，這些CSS濾鏡可以用在網(wǎng)頁(yè)制作上，可以制作出非常美觀的界面。CSS濾鏡屬性只能用在能夠看得見的HTML元素上，不能使用div的id，class定義。所謂的HTML元素就是它們?cè)陧?yè)面上定義的一個(gè)矩形空間，瀏覽器的窗口可以顯示這些正常元素。在此，鄭州網(wǎng)站建設(shè)公司的小編整理了一些HTML上的元素和對(duì)應(yīng)的說(shuō)明，這些HTML元素上都可以使用CSS濾鏡，列表如下：

下面列出來(lái)的這些都是
BODY 網(wǎng)頁(yè)文檔的主體元素，所有的可見范圍都在元素內(nèi)
BUTTON 表單域的按鈕，可以有“發(fā)送(submit)”、“重置(reset)”等形式
DIV 定義了網(wǎng)頁(yè)上的一個(gè)區(qū)域，這個(gè)區(qū)域的高度、寬度或者絕對(duì)位置都是以知的
IMG 圖片元素，通過(guò)指定“src'屬性來(lái)指定圖片的來(lái)源
INPU T輸入表單域
MARQUEE 移動(dòng)字幕效果
SPAN 定義了網(wǎng)頁(yè)上的一個(gè)區(qū)域，這個(gè)區(qū)域的高度、寬度或者絕對(duì)位置都是以知的
TABLE 表格
TD 表格數(shù)據(jù)單元格
TEXTAREA 文本區(qū)域
TFOOT 多行輸入文本框
TH 表格標(biāo)題單元格
THEAD 表格標(biāo)題
TR 表格行

下面整理了一些CSS濾鏡及其語(yǔ)法介紹，可供建站用戶和網(wǎng)站建設(shè)人員參考：

CSS濾鏡使用語(yǔ)法：STYLE="filter:filtername(fparameter1, fparameter2...)"
（Filtername為濾鏡的名稱，fparameter1、fparameter2等是濾鏡的參數(shù)）

1、濾鏡：Alpha
作用：設(shè)置透明層次
語(yǔ)法：STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，F(xiàn)inishX=finishX，F(xiàn)inishY=finishY)"
說(shuō)明：
Opacity：起始值，取值為0～100, 0為透明，100為原圖。
FinishOpacity：目標(biāo)值。
Style：1或2或3
StartX：任意值
StartY：任意值
例子：filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")

2、濾鏡：blur
作用：創(chuàng)建高速度移動(dòng)效果，即模糊效果
語(yǔ)法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
說(shuō)明：
Add：一般為1，或0。
Direction：角度，0～315度，步長(zhǎng)為45度。
Strength：效果增長(zhǎng)的數(shù)值，一般5即可。
例子：filter:Blur(Add="1",Direction="45",Strength="5")

3、濾鏡：Chroma
作用：制作專用顏色透明
語(yǔ)法：STYLE="filter:Chroma(Color = color)"
說(shuō)明：color：#rrggbb格式，任意。
例子：filter:Chroma(Color="#FFFFFF")

4、濾鏡：DropShadow
作用：創(chuàng)建對(duì)象的固定影子
語(yǔ)法：STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
說(shuō)明：Color:#rrggbb格式，任意。
Offx：X軸偏離值。
Offy：Y軸偏離值。
Positive：1或0。
例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

5、濾鏡：FlipH
作用：創(chuàng)建水平鏡像圖片
語(yǔ)法：STYLE="filter:FlipH"
例子：filter:FlipH

6、濾鏡：FlipV
作用：創(chuàng)建垂直鏡像圖片
語(yǔ)法：STYLE="filter:FlipV"
例子：filter:FlipV

7、濾鏡：glow
作用：加光輝在附近對(duì)象的邊外
語(yǔ)法：STYLE="filter:Glow(Color=color, Strength=strength)"
說(shuō)明：
Color：發(fā)光顏色。
Strength：強(qiáng)度(0－100)
例子：filter:Glow(Color="#6699CC",Strength="5")

8、濾鏡：gray
作用：把圖片灰度化
語(yǔ)法：STYLE="filter:Gray"
例子：filter:Gray

9、濾鏡：invert
作用：反色效果
語(yǔ)法：STYLE="filter:Invert"
例子：filter:Invert

10、濾鏡：mask
作用：創(chuàng)建透明掩膜在對(duì)象上
語(yǔ)法：STYLE="filter:Mask(Color=color)"
例子：filter:Mask (Color="#FFFFE0")

11、濾鏡：shadow
作用：創(chuàng)建偏移固定影子
語(yǔ)法：filter:Shadow(Color=color, Direction=direction)
說(shuō)明：
Color：#rrggbb格式。
Direction：角度，0－315度，步長(zhǎng)為45度。
例子：filter:Shadow (Color="#6699CC", Direction="135")

12、濾鏡：wave
作用：波紋效果
語(yǔ)法：filter:Wave(Add=add，F(xiàn)req=freq，LightStrength=strength，Phase=phase，Strength=strength)
說(shuō)明：
Add：一般為1，或0。
Freq：變形值。
LightStrength：變形百分比。
Phase：角度變形百分比。
Strength：變形強(qiáng)度。
例子：filter:wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

13、濾鏡：Xray
作用：使對(duì)象變得像被x光照射一樣
語(yǔ)法：STYLE="filter:Xray"
例子：filter:Xray