CSS3 filter 滤镜拓展补充（URL）

CSS3 filter 中有一个比较有意思的是 URL ，google 了很多次，愣是没找到啥教程。 how use ? 文档中就都是这一句： “ The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element. （URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素.）”。 好吧，进入正题。    

1、blur() 高斯模糊

SVG 用法为： 其中 stdDeviation 为模糊数值，单位为像素( px )。 貌似负数等同于 5px 的效果。 默认值为 0 ；    

2、brightness() 亮度调节

SVG 用法为： 其中 slope 的属性值为 0-1-250 的值，可分别对其中一项进行修改，效果更佳。 貌似负数为 0 的效果，高于 250 没变化。 默认值为 1 ；    

3、 contrast() 对比度

SVG 用法为： 其中 slope 的属性值为 0-1-250 的值，可分别对其中一项进行修改，效果更佳。 默认值为 1 ； 其中 intercept 的属性值为明暗的变化。-1 为完全黑。1为完全白。 默认值为 0 ；    

4、drop-shadow() 阴影效果

SVG 用法一： dx 为 x 轴偏移，dy 为 y 轴偏移。 默认值为 0 ； stdDeviation 为阴影半径。 默认值为 0 ；   SVG 用法二： dx 为 x 轴偏移，dy 为 y 轴偏移。 默认值为 0 ； stdDeviation 为阴影半径。 默认值为 0 ； tableValues 三个参数为 0 内半径 外半径（0 是干啥的？）； 默认值为 0 0 0；   SVG 用法三(更新)： dx 为 x 轴偏移，dy 为 y 轴偏移。 默认值为 0 ； stdDeviation 为阴影半径。 默认值为 0 ；    

5、grayscale() 灰度

SVG 用法为： value 矩阵参数中为从上往下的灰度 RGB 默认数值 ，后面 0 0 接受最大值为相加等于 1 。 默认值

• 0.2126 0.7152 0.0722 0 0
• 0.2126 0.7152 0.0722 0 0
• 0.2126 0.7152 0.0722 0 0
• 0 0 0 1 0 ；

   

6、hue-rotate() 色相旋转

values 为旋转的角度数值（不带单位）。 默认值为 0 ；    

7、invert() 色相反转

tableValues 从上往下为 R G B 值，[1 0] 为色相反转，[0 1] 为正常； 默认值为：1 0 ;    

8、opacity() 透明度

tableValues 值为 [ 背景明暗 透明度 ] 。背景明暗：0 为背景完全透明、1为背景完全黑。透明度：0 为完全透明、1为完全不透明。 默认值为 0 1 。    

9、 saturate() 饱和度

values 值低于 1 为色调不饱和，高于 1 为添加饱和色调。 默认值为 1 。    

10、 sepia() 复古度（自编）

value 矩阵参数中为从上往下的灰度 RGB 默认数值 ，后面 0 0 接受最大值为相加等于 1 ，跟灰度类似。 默认值：

• 0.393 0.769 0.189 0 0
• 0.349 0.686 0.168 0 0
• 0.272 0.534 0.131 0 0
• 0 0 0 1 0 ；

   

用法示例：

内用：

直接在 svg 中引入 img ，图片自动会被滤镜属性渲染。  

外用：

预先配置好 svg 滤镜属性 。 在样式中引入该 svg。     TIP: 复合函数没有 svg 写法，例如 filter: contrast(100) brightness(300%) 用 svg 写法实现不了。   完毕！ 参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter