精通 CSS 濾鏡（三）

2020-03-24 17:30:44

字體：大中小

供稿：網(wǎng)友

語(yǔ)法：{FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity, >startx=startx,starty=starty,finishx=finishx,finishy=finishy)} Alpha 屬性是把一個(gè)目標(biāo)元素與背景混合。設(shè)計(jì)者可以指定數(shù)值來(lái)控制混合的程度。這種與背景混合通俗地說(shuō)就是一個(gè)元素的透明度。通過(guò)指定坐標(biāo)，可以指定點(diǎn)、線(xiàn)、面的透明度。他們的參數(shù)含義分別如下：
opacity 代表透明度水準(zhǔn)。默認(rèn)的范圍是從0 到 100，他們其實(shí)是百分比的形式。也就是說(shuō)，0代表完全透明，100代表完全不透明。 finishopacity 是一個(gè)可選參數(shù)，如果想要設(shè)置漸變的透明效果，就可以使用他們來(lái)指定結(jié)束時(shí)的透明度。范圍也是0 到 100。 style 參數(shù)指定了透明區(qū)域的形狀特征。其中0代表統(tǒng)一形狀、1代表線(xiàn)形、2代表放射狀、3代表長(zhǎng)方形。 STARTX 和 STARTY 代表漸變透明效果的開(kāi)始X和Y坐標(biāo)。 FINISHX 和 FINISHY 代表漸變透明效果結(jié)束X和Y 的坐標(biāo)。效果如下：
2、Blur 濾鏡語(yǔ)法：對(duì)于HTML：{ilter:blur(add=add,direction=direction,strength=strength)}
對(duì)于Script語(yǔ)言： [oblurfilter=] object.filters.blur
用手指在一幅尚未干透的油畫(huà)上迅速劃過(guò)時(shí)，畫(huà)面就會(huì)變得模糊。 Blur 就是產(chǎn)生同樣的模糊效果。
ADD 參數(shù)是一個(gè)布爾判斷 TRUE（默認(rèn)）或者 FALSE 。它指定圖片是否被改變成印象派的模糊效果。模糊效果是按順時(shí)針的方向進(jìn)行的， DIRECTION 參數(shù)用來(lái)設(shè)置模糊的方向。其中0度代表垂直向上，然后每45度為一個(gè)單位。它的默認(rèn)值是向左的270度。 STRENGTH 值只能使用整數(shù)來(lái)指定，她代表有多少像素的寬度將受到模糊影響。默認(rèn)是5個(gè)。對(duì)于網(wǎng)頁(yè)上的字體，如果設(shè)置他的模糊 ADD=1 ，那么這些字體的效果會(huì)非常好看的。如下：
filter:blur(add=ture,direction=135,strength=10）我向你飛，雨溫柔地綴！
3、FlipH, FlipV 濾鏡語(yǔ)法：{filter:filph} ,{filter:filpv} 分別是水平反轉(zhuǎn)和垂直反轉(zhuǎn)，具體如下：
語(yǔ)法：{filter:chroma(color=color)}
使用 Chroma 屬性可以設(shè)置一個(gè)對(duì)象中指定的顏色為透明色，參數(shù)COLOR即要透明的顏色。下面是蘭色文字，然后用Chroma 濾鏡過(guò)濾掉蘭色，就成了下面的樣子。
filter:chroma(color=blue)滴水檐坊5、DropShadow 濾鏡語(yǔ)法：{filter:dropshadow(color=color,offx=ofx,offy=offy,positive=positive)} DropShaow 顧名思義就是添加對(duì)象的陰影效果。其工作原理是建立一個(gè)偏移量，加上較深。 Color 代表投射陰影的顏色， offx 和 offy 分別是X方向和Y方向陰影的餓偏移量。 Positive 參數(shù)是一個(gè)布爾值，如果為 TRUE（非0），那么就為任何的非透明像素建立可見(jiàn)的投影。如果為 FASLE（0），那么就為透明的像素部分建立透明效果
語(yǔ)法：{filter:glow(color=color,strength)}
當(dāng)對(duì)一個(gè)對(duì)象使用 glow 屬性后，這個(gè)對(duì)象的邊緣就會(huì)產(chǎn)生類(lèi)似發(fā)光的效果。 COLOR 是指定發(fā)光的顏色， STRENGTH 則是強(qiáng)度的表現(xiàn)，可以從1到255之間的任何整數(shù)來(lái)指定這個(gè)力度。
filter:glow(color=red,strength=10) 后的效果滴水檐茶坊 filter:glow(color=#ffff00,strength=5) 后的效果滴水檐茶坊html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：如何利用html和css來(lái)實(shí)現(xiàn)注冊(cè)表單的簡(jiǎn)單實(shí)例

下一篇：CSS+DIV設(shè)計(jì)實(shí)例：超酷豎排導(dǎo)航欄