您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > CSS濾鏡:blur屬性

CSS濾鏡:blur屬性

文章來源：365jz.com 點(diǎn)擊數(shù)：241 更新時(shí)間：2008-04-25 11:54 參與評論

假如您用手在一幅還沒干透的油畫上迅速劃過，畫面就會變得模糊。CSS下的blur屬性就會達(dá)到這種模糊的效果。
　　先來看一下blur屬性的表達(dá)式：

　　filter：blur（add=add，direction，strength=strength）

　　我們看到blur屬性有三個(gè)參數(shù)：add、direction、strength。
　　Add參數(shù)有兩個(gè)參數(shù)值：true和false。意思是指定圖片是否被改變成模糊效果。　　　Direction參數(shù)用來設(shè)置模糊的方向。模糊效果是按照順時(shí)針方向進(jìn)行的。其中0度代表垂直向上，每45度一個(gè)單位，默認(rèn)值是向左的270度。角度方向的對應(yīng)關(guān)系見下表：

　　Strength參數(shù)值只能使用整數(shù)來指定，它代表有多少像素的寬度將受到模糊影響。默認(rèn)值是5像素。
　　還是看一個(gè)例子吧。

[Ctrl+A 全選,提示:你可修改代碼后運(yùn)行]

　　看起來是不是有些像萬花筒，在這個(gè)例子中加入了一些JavaScript的語句，代碼如下：

　　<html>
　　　<head>
　　　<title>blur css</title>
　　　<script>
　　　function handlechange(obj)
　　　//*設(shè)置一個(gè)循環(huán)函數(shù)handlechange，對象是obj*//
　　　{ with(obj.filters(0))//*Obj的filter屬性*//
　　　 { if (strength<255)//*設(shè)置循環(huán)條件*//
　　　　 { strength +=1；direction +=45；}
　　　　//*每循環(huán)一次strength就加1，direction加45度*// 　　　　　　　
　　　 }
　　　}
　　　</script>
　　　</head>
　　　<body>
　　　<p><img id =“img1” src=“ss01087.jpg” 　　　　　　　　
　　　　　style=“filter：blur(strength=1)”
　　　　　onfilterchange=“handlechange(this)”>
　　　//*導(dǎo)入一幅圖片，初始blur屬性strength等于1，同時(shí)調(diào)用onfilterchange函
　　　數(shù)*//
　　　</p>
　　　 </body>
　　</html>

　　注：在javascript中blur屬性是這樣定義的：
　　　　[oBlurfilter=] object.Filters.blur

　　這個(gè)例子是Blur屬性的一個(gè)比較復(fù)雜的例子，下一節(jié)我將向您介紹兩個(gè)較簡單的blur屬性效果。

通過blur屬性還可以設(shè)置頁面中的字體。如果把字體的blur屬性add參數(shù)值定義為1，得出來的字體效果是這樣的（如下圖）：

　　怎么樣，是不是有些印象派的意思，這種效果的實(shí)現(xiàn)代碼如下：

<html>
　　　<head>
　　　<title>filter blur</title>
　　　<style>//*CSS樣式定義開始*//
　　　
　　　</style>
　　　</head>
　　　<body>
　　　<div style=“width:702； height: 288”>
　　　<p style=“font-family:lucida handwirting italic；
　　　 font-size:72；font-style:bold；color:rgb(55,72,145)；” >
　　　 LEAF</p>
　　　//*定義字體名稱、大小、樣式、前景色*//
　　　</div>
　　　</body>
　　</html>