[[376349]]

CSS3濾鏡效果提供了一種將視覺效果應用于圖像的簡便方法。

一、模糊效果

像高斯模糊效果這樣的Photoshop可以使用該blur()功能應用于元素。此函數接受CSS長度值作為定義模糊半徑的參數。較大的值將產生更多的模糊。如果未提供參數，則使用值0。

例：

img.blur { 
   -webkit-filter: blur(2px); /* Chrome, Safari, Opera */ 
   filter: blur(2px); 
} 
img.extra-blur { 
   -webkit-filter: blur(5px); /* Chrome, Safari, Opera */ 
   filter: blur(5px); 
} 
/* Some CSS to beautify this example */ 
table td{ 
   padding: 10px; 
   text-align: center; 
} 

運行結果：

二、設置圖像亮度

brightness()功能可用于設置圖像的亮度。值為0%將創建全黑的圖像。而值100%或1使圖像不變。其他值是效果的線性乘數。

還可以將亮度設置為高于100%，這樣可以使圖像更亮。如果缺少數量參數，則使用值1。不允許使用負值。

例：

<style> 
img { 
width: 200px; 
height: 100px; 
} 
 
img.blur { 
-webkit-filter: blur(2px); 
/* Chrome, Safari, Opera */ 
filter: blur(2px); 
} 
 
img.extra-blur { 
-webkit-filter: blur(5px); 
/* Chrome, Safari, Opera */ 
filter: blur(5px); 
} 
 
/* Some CSS to beautify this example */ 
table td { 
padding: 10px; 
text-align: center; 
} 
</style> 

運行結果：

注意：75%接受以百分號表示的值(例如)的過濾器函數也接受以十進制表示的值(如0.75)。如果該值無效，該函數將返回none并且將不應用任何濾鏡效果。

三、調整圖像對比度

contrast()功能用于調整圖像的對比度。的值0%將創建全黑的圖像。而值100%或1保持圖像不變。還允許超過100%的值，從而提供對比度較低的結果。如果數量參數缺失或省略，1則使用值。

例：

<style> 
img { 
width: 200px; 
height: 100px; 
} 
 
img.bright { 
-webkit-filter: contrast(200%); 
/* Chrome, Safari, Opera */ 
filter: contrast(200%); 
} 
 
img.dim { 
-webkit-filter: contrast(50%); 
/* Chrome, Safari, Opera */ 
filter: contrast(50%); 
} 
 
/* Some CSS to beautify this example */ 
table td { 
padding: 10px; 
text-align: center; 
} 
</style> 

運行結果：

四、向圖像添加陰影

可以使用該drop-shadow()功能將陰影效果應用于Photoshop等圖像。

此功能類似于該box-shadow屬性。

例：

<style> 
img { 
width: 200px; 
height: 100px; 
} 
 
img.shadow { 
-webkit-filter: drop-shadow(2px 2px 4px orange); 
/* Chrome, Safari, Opera */ 
filter: drop-shadow(2px 2px 4px orange); 
} 
 
img.shadow-large { 
-webkit-filter: drop-shadow(4px 4px 10px orange); 
/* Chrome, Safari, Opera */ 
filter: drop-shadow(4px 4px 10px orange); 
} 
 
/* Some CSS to beautify this example */ 
table td { 
padding: 10px; 
text-align: center; 
} 
</style> 

運行結果：

注意：drop-shadow()函數的第一個和第二個參數分別指定陰影的水平和垂直偏移，而第三個參數指定模糊半徑，最后一個參數指定陰影顏色，就像該box-shadow屬性一樣，但有一個例外，' inset'不允許使用關鍵字。

總結

本文基于CSS基礎，通過案例，詳細的講解了CSS3濾鏡效果的模糊效果、設置圖像高度、調整圖像對比度、向圖像添加陰影等知識。這幾個方面通過運行后效果圖的展示，讓讀者更直觀，更簡單易動。

代碼很簡單，希望文章的內容能夠幫助更好的學習。

本文轉載自微信公眾號「前端進階學習交流」，可以通過以下二維碼關注。轉載本文請聯系前端進階學習交流公眾號。