CSS各種濾鏡製作10種美術效果字

css|濾鏡 　　如果靈活應用CSS各種濾鏡的特點並加以組合，我們可以得到許多意想不到的效果。這是一些效果示範，供各位參考。

　　效果一：

www.webjx.com

　　這個效果用了shadow濾鏡，代碼如下：

filter:shadow(color=black,direction=135)

　　效果二：

www.webjx.com

　　用blur濾鏡做出的效果，代碼如下：

filter:blur(direction=135,strength=10)

　　效果三：

www.webjx.com

　　用dropshadow濾鏡做出的效果，代碼如下：

filter:dropshadow(color=#888888,offx=8,offy=8,positive=1)

　　效果四：

www.webjx.com

　　用glow濾鏡做出的效果，代碼如下：

filter:glow(color=royalblue,strength=5)

　　效果五：

www.webjx.com

　　這個效果用到了兩種濾鏡：shadow和alpha，代碼如下：

filter:alpha(opacity=100,finishiopacity=0,style=1) shadow(color=#ff3366,direction=135)

　　效果六：

www.webjx.com

　　這個效果也用到兩個濾鏡mask和shadow，和本文最頂端的例子一樣，只是顏色不同，代碼如下：

filter:mask(color=#f7f7f7) shadow(color=royalblue,direction=135)

　　注意：mask的顏色要和網頁背景色一致，字型的顏色由shadow決定。

　　效果七：

www.webjx.com

　　這個效果和效果六類似，效果六中的mask用的是和背景同樣的顏色，而本例mask則用的是紅色，同樣的，字型顏色由shadow決定。代碼如下：

filter:mask(color=red) shadow(color=black,direction=135)

　　效果八：

www.webjx.com

　　如果說效果六的字型是陰文的話，那麼這個效果的字型應該算是陽文了，用兩個濾鏡實現mask和dropshadow，注意mask的顏色要和網頁背景色一致，或者把mask和chroma成對使用，也可達到同樣效果（下面有介紹）。代碼如下：

filter:mask(color=#f7f7f7f) dropshadow(color=royalblue,offx=-3,offy=-3,positive=1)

　　效果九：

www.webjx.com

　　這個有光暈的文字用了兩個濾鏡glow和droshadow，代碼如下：

filter:glow(color=pink,strength=10) dropshadow(color=royalblue,offx=3,offy=3,positive=1)

　　效果十：

www.webjx.com

　　用glow濾鏡可以做空心字，方法是將字型顏色設定為背景色，再將glow濾鏡的strenght的值設定為1或2即可。這個效果的代碼如下：

filter:glow(color=green,strength=2) shadow(color=#66cc99 ,direction=135)