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"/>