DropShadow屬性、Chroma屬性和blur屬性效果

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> DropShadow屬性、Chroma屬性和blur屬性效果

編輯：CSS詳解

DropShadow屬性

　　DropShadow屬性是為了添加對象的陰影效果的。它實現的效果看上去就像使原來的對象離開頁面，然後在頁面上顯示出該對象的投影。看一看它的表達式：
　　Filter：DropShadow（Color=color，Offx=Offx，Offy=offy，
　　　　　　　　　　　　Positive=positive）
　　該屬性一共有四個參數： Color代表投射陰影的顏色。 Offx和offy分別X方向和Y方向陰影的偏移量。偏移量必須用整數值來設置。如果設置為正整數，代表X軸的右方向和Y軸的向下方向。設置為負整數則相反。
　　Positive參數有兩個值：True為任何非透明像素建立可見的投影，False為透明的像素部分建立可見的投影。
　　同樣，我們先來看一個例子（見下圖）：

看，圖中的文字就像是從頁面上飛出來一樣，並且留下了一層淡淡的影子。
　　實際上在這裡應用的就是CSS的DropShadow屬性，我們來看一下它的代碼：
　　<Html>
　　　<head>
　　　<title>dropshadow </title>
　　　<style>//*定義CSS樣式*//
　　　
　　　file://*定義DIV范圍內的樣式，絕對定位，投影的顏色為#FFCCFF，
　　　投影坐標為向右偏移15個像素，向下偏移10個像素*//
　　　</style>
　　　</head>
　　　<body>
　　　<div>
　　　<p style=“font-family：matisse itc；font-size：64；
　　　　　　　　font-weight：bold；color：#CC00CC；”>
　　　file://*定義字體名稱、大小、粗細、顏色*//
　　　Love Leaf </p>
　　 </div>
　　 </body>
　　 </Html>
　　和chroma屬性一樣，Dropshadow屬性對圖象的支持不好，我指的是JPEG、GIF格式的圖象文件。不能支持的原因與Chroma一樣，因為這種圖象的顏色很豐富，很難找到一個投射陰影的位置。

Chroma屬性
　　Chroma屬性可以設置一個對象中指定的顏色為透明色，它的表達式如下：
　　Filter：Chroma（color=color）
　　這個屬性的表達式是不是很簡單，它只有一個參數。只需把您想要指定透明的顏色用Color參數設置出來就可以了。比如下面這幅圖：

圖中顯示兩種字體，兩種顏色，我們現在對“leaves”字體添加chroma屬性，使其透明。代碼如下：
　　<Html>
　　　<head>
　　　<title>chroma filter</title>
　　　<style>
　　　
　　　</style>
　　　</head>
　　　<body>
　　　<div>
　　　<p>LEAVES <em>LOVE</em></p>
　　　</div>
　　　</body>
　　</Html>
　　通過上面代碼中對chroma的屬性設置，使綠色透明。顯示效果如下圖：

　　我們看到綠色的leaves字體不見了，實際上它是透明了，在IE下點擊它所在的區域，它還是會顯示出來（見下圖）：

　　另外，需要注意的是，chroma屬性對於圖片文件不是很適合。因為很多圖片是經過了減色和壓縮處理（比如JPG、GIF等格式），所以它們很少有固定的位置可以設置為透明。

　　blur屬性

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

　　怎麼樣，是不是有些印象派的意思，這種效果的實現代碼如下：

<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>
　　　file://*定義字體名稱、大小、樣式、前景色*//
　　　</div>
　　　</body>
　　</Html>

　　我們看到strength設置為25，如果把其值再改大一些，就會達到非常誇張的效果，同時把Direction參數值為180，顯示效果如下圖：

　　用blur屬性設置字體可以達到很多效果，把direction和strength再做修改，還能達到多種效果，您可以自己修改試一試。

上一頁:初步了解CSS3
下一頁:Invert屬性、Glow屬性和FlipH、FlipV屬性

CSS詳解

不同下拉選擇提交不同的用戶帳號信息: <!--要完成此效果需要兩個步驟第一步：把如下代碼加入到<head>區域中--&
CSS Hack整理: CSS Hack是在標准CSS沒辦法兼容各浏覽器顯示效果時才會用上的補救方法,在各浏覽器廠商解析C
div與span區別及用法: 接下

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

DIV CSS 佈局教程網

相關文章