大家好,今天小编来为大家解答以下的问题，关于深入解析：CSS3 Filter属性应用与技巧，这个很多人还不知道，现在让我们一起来看看吧！
兼容性问题：一般应用必须兼容webkit
css语法（“|”代表或）：
过滤器： 无|模糊() |亮度() |对比() |阴影（）|灰度（）|色调旋转() |反转（）|不透明度() |饱和（）|棕褐色() |网址（）；
过滤器说明：
none：默认值，无影响。
url() URL 函数接受一个设置SVG 过滤器的XML 文件，并且可以包含一个锚点来指定特定的过滤器元素。
原始图像模糊(px)：对图像设置高斯模糊。 “半径”值设置高斯函数的标准差，或者说屏幕上有多少像素混合在一起，因此值越大，越模糊；
如果不设置值，则默认为0；该参数可以设置css长度值，但不接受百分比值。
模糊效果图亮度(%)：对图像应用线性乘法，使其看起来更亮或更暗。如果值为0%，图像将是全黑的。如果该值为100%，则图像不会发生变化。其他值对应线性乘数效应。 100%以上的值就可以了，图像会比以前更亮。如果未设置值，则默认为1。
亮度(30%) 渲染对比度(%)：调整图像的对比度。如果值为0%，图像将是全黑的。该值为100%，图像不变。值可以超过100%，这意味着将使用较低的比较。如果未设置值，则默认为1。
对比度（180%）效果图drop-shadow（h阴影v阴影模糊扩散颜色）：给图像设置阴影效果。阴影在图像下方合成，并且可以是模糊的、可以用特定颜色绘制的遮罩的偏移版本。该函数接受类型（在CSS3 上下文中定义）的值，但不允许使用"inset" 关键字。该功能与现有的box-shadow box-shadow 属性非常相似；不同的是，一些浏览器通过过滤器提供硬件加速以获得更好的性能。参数如下：（必填）
这是设置阴影偏移的两个值。设置水平距离。负值将导致阴影出现在元素的左侧。设置垂直距离。负值会导致阴影出现在元素上方。查看可能的单位。
如果两个值都为0，则阴影直接出现在元素后面（如果设置了and/or，则会出现模糊效果）。 （选修的）
这是第三个代码值。值越大，就越模糊，阴影也会变得更大、更亮。不允许使用负值。如果不设置，默认为0（阴影的边界非常锐利）。 （选修的）
这是第四个值。正值会导致阴影扩大并变大，负值会导致阴影缩小。如果未设置，默认值为0（阴影将与元素大小相同）。
请注意， Webkit 和其他一些浏览器不支持第四个长度，如果添加则不会渲染。 （选修的）
查看该值可能的关键字和标签。如果未设置，则颜色值基于浏览器。在Gecko (Firefox)、Presto (Opera) 和Trident (Internet Explorer) 中，应用colorcolor 属性的值。此外，如果省略颜色值，则阴影在WebKit 中是透明的。
grayscale(%) 将图像转换为灰度。该值定义了转换的规模。如果值为100%，图像将完全转换为灰度，如果值为0%，图像将保持不变。 0% 到100% 之间的值是效果的线性乘数。如果不设置，则该值默认为0；
灰度(100%) 渲染色调旋转(deg) 将色调旋转应用于图像。 “角度”值设置调整图像的色环角度。如果值为0deg，则图像不会发生变化。如果未设置该值，则默认值为0deg。虽然这个值没有最大值，但是超过360deg的值就相当于又绕了一圈。
hue-rotate(180deg) 效果图invert(%) 反转输入图像。该值定义了转换的规模。 100%的值就是完全反转。值为0% 表示图像没有变化。 0% 到100% 之间的值是效果的线性乘数。如果未设置该值，则该值默认为0。
invert(100%) 渲染不透明度(%) 转换图像的透明度。该值定义了转换的规模。值0% 表示完全透明，值100% 表示图像没有变化。 0%到100%之间的值是效果的线性乘数，相当于乘以图像样本的数量。如果不设置该值，则该值默认为1。该功能与现有的opacity属性非常相似，只不过通过过滤器，一些浏览器提供硬件加速来提高性能。
opacity(50%) Rendering saturate(%) 转换图像饱和度。该值定义了转换的规模。值为0% 表示图像完全去饱和，值为100% 表示图像没有变化。其他值是效果的线性乘数。允许高于100%的值，饱和度更高。如果未设置该值，则该值默认为1。
saturate(7) 渲染棕褐色(%) 将图像转换为棕褐色。该值定义了转换的规模。 100% 的值完全是棕褐色，0% 的值使图像保持不变。 0% 到100% 之间的值是效果的线性乘数。如果不设置，则该值默认为0；
文章分享结束，深入解析：CSS3 Filter属性应用与技巧和的答案你都知道了吗？欢迎再次光临本站哦！
【深入解析：CSS3 Filter属性应用与技巧】相关文章：
2.米颠拜石
3.王羲之临池学书
8.郑板桥轶事十则
用户评论
我一直想学点Web设计效果，这个CSS3 filter看起来很有意思!
有18位网友表示赞同！
之前没有听说过filter属性，可以试试提升网站视觉效果。
有6位网友表示赞同！
现在很多网站都用图片或视频做背景，这个滤镜能增加更丰富的层次感吗？
有12位网友表示赞同！
这篇文章能不能简单讲一下有哪些常用的滤镜效果?
有10位网友表示赞同！
学习CSS3是必要技能的，这个filter属性看来很实用的呀。
有17位网友表示赞同！
用滤镜处理图片会不会比图片编辑软件更容易呢？
有11位网友表示赞同！
以前做效果只能靠很多js代码实现，现在CSS3直接就能做了?
有8位网友表示赞同！
我感觉学习css3 filter可以让我网页设计更上一层楼。
有20位网友表示赞同！
这个属性的使用是不是比较复杂啊？适合新手吗？
有20位网友表示赞同！
我想知道滤镜的使用场景，比如在游戏界面的设计中可以用吗？
有9位网友表示赞同！
网站优化方面，使用滤镜会不会影响页面加载速度?
有6位网友表示赞同！
学习这个属性需要了解什么基础知识呢？
有12位网友表示赞同！
滤镜能不能实现特效动画的效果来提升用户体验？
有8位网友表示赞同！
希望这篇文章能详细介绍不同滤镜的参数设置和效果变化。
有17位网友表示赞同！
我以前用过一些在线图像编辑工具，它们也提供了滤镜功能，CSS3的滤镜和这些有什么区别?
有7位网友表示赞同！
这个filter属性可以用在网站中的哪个元素呢？
有16位网友表示赞同！
我可以尝试自己用filter实现一个复古的照片效果吗？
有9位网友表示赞同！
我想了解更多关于CSS3滤镜的新技术应用案例。
有6位网友表示赞同！
这篇文章能让我了解到当前CSS3滤镜的最新发展趋势吗？
有5位网友表示赞同！