CSS3 filter

一、什么是filter

CSS濾鏡屬性，可以在元素呈現之前，為元素的渲染提供一些效果，如模糊、顏色轉移之類的。濾鏡常用於調整圖像、背景、邊框的渲染。目前Filter Effects Module還只是W3C的一個草案，瀏覽器還不完全支持，在使用時需要加瀏覽器前綴。

 

二、filter語法

 

/* 設置濾鏡函數（可多個，空格分開） */
filter: <filter-function> [<filter-function>]* | none
/* 引入定義了filter效果的svg資源，且可設置特定id的效果 */
filter: url(svg-url#element-id)

filter標准定義了一些已實現預設效果的函數（如grayscale、blur等）；你也可以將設置了SVG濾鏡的xml文件，用URL引入，且可以包含一個錨點來指定一個具體的濾鏡效果。filter屬性默認值為none,可應用於圖像和容器元素，沒有繼承性。

預置的濾鏡函數（filter-function）有：

  <filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()>
  | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()>

filter屬性可接受多個濾鏡函數，展示多個濾鏡疊加后的效果。

 

URL函數引入svg濾鏡

SVG濾鏡資源（SVG Filter Sources）是指以xml文件格式定義的svg濾鏡效果集，可以通過URL引入並且通過錨點（#element-id）指定具體的一個濾鏡元素。如：

<svg version="1.1" 
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events" 
     baseProfile="full">     
        <defs>
            <!-- 此處定義濾鏡 -->
            <filter id="blur">
                <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
                  <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
            </filter>
        </defs>
    </svg>

想要應用此svg文件中定義的濾鏡效果，只需url引入該文件（可設#blur錨點）作為filter屬性的值就可以了。其中feGaussianBlur、feOffset稱之為filter primitive。

 

三、效果舉例

給圖像設置高斯模糊。參數值設定高斯函數的標准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果沒有設定值，則默認是0；這個參數可設置css長度值，但不接受百分比值。

  filter: blur(5px);
  <!-- 對應的filter primitive -->
  <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>