1.CSS静态滤镜样式 (filter)(只有IE4.0以上支持) 
  CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, ...) }

Filter样式 简要说明 支持参数 
alpha 设置图片或文字的不透明度 opacity、finishOpacity、style、startX、startY、finishX、finishY、add、direction、strength 
blur 在指定的方向和位置上产生动感模糊效果 add、direction、strength 
chroma 对所选择的颜色进行透明处理 color 
dropShadow 在指定的方向和位置上产生阴影 color、offX、offY、positive 
flipH 沿水平方向翻转对象   
flipV 沿垂直方向翻转对象   
glow 在对象周围上发光 color、strength 
gray 将对象以灰度处理   
invert 逆转对象颜色   
light 对对象进行模拟光照   
mask 对对象生成掩膜 color 
shadow 沿对象边缘产生阴影 color、direction 
wave 在垂直方向产生正弦波形 add、freq、lightStrength、phase、strength 
xray 改变对象颜色深度,并绘制黑白图象  

以上就是静态滤镜的全部内容,要注意的是CSS是区分大小写的! 
2.CSS动态滤镜 
  动态滤镜可以为页面添加动人的淡入淡出、图象转化效果,它可以分为两种blend(混合)和reveal(显示),前者可以使对象渐渐消失或出现,后者提供了24种图象转化的效果。对于动态滤镜的调用除去象在静态滤镜中要定义的滤镜类型,参数等等,还用到脚本语言控制它的状态。 
  首先,在开始一个动态效果之前,先需要进行装备(Apply),然后播放(Play)动态效果,在动态效果进行中还可以中断动态效果(Stop),以上可以用下面的方法实现: 
    对象名.filters(滤镜数值).Apply() 
    对象名.filters(滤镜数值).Play() 
    对象名.filters(滤镜数值).Stop() 
  对于滤镜状态的判断可以通过“对象名.filters(滤镜数值).status”判断,该值为0时,表示滤镜未执行,为1时,表示滤镜已经完成,为2时表示滤镜在执行中。 
  在定义filter时,如上面所提到的,可以有混合(“filter:blendTrans(duration=时间数值)”,duration表示滤镜执行需要的时间,单位为秒)和显示(“filter:revealTrans(duration=时间数值,transition=过渡类型)”,过渡类型为从0-23的数值)两种。 
  
  滤镜目前还未被W3C正式承认。滤镜只是微软IE浏览器的组成部分,不能用于Netscape浏览器。制定有关标准的组织正在就此进行讨论,但尚未达成最后定论。在我看来,滤镜是一种非常有趣而且是制作精彩的视觉效果必不可少的一部分。滤镜能节省带宽,而且是你能在制作奇妙的 
视觉设计时使用文字格式,而不必先制作庞大的文字位图以取得相同的效果。 
  但由于这些功能尚未成为HTML的正式组成部分,所以并不是所有的浏览器都能看到这些特色。有些时候,你必须考虑以传统的方式制作相同的效果,当然,你不得不继续将庞大的GIF文件塞到网页之中。 
沉默...沉默...

  
CSS滤镜filter详解 
语法:STYLE="filter:filtername(fparameter1, fparameter2...)" 
(Filtername为滤镜的名称,fparameter1、fparameter2等是滤镜的参数)

滤镜说明: 
alpha:设置透明层次 
blur:创建高速度移动效果,即模糊效果 
chroma:制作专用颜色透明 
DropShadow:创建对象的固定影子 
FlipH:创建水平镜像图片 
FlipV:创建垂直镜像图片 
glow:加光辉在附近对象的边外 
gray:把图片灰度化 
invert:反色 
light:创建光源在对象上 
mask:创建透明掩膜在对象上 
shadow:创建偏移固定影子 
wave:波纹效果 
Xray:使对象变得像被x光照射一样

1、滤镜:Alpha 
语法:STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity,Style=style, StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)" 
说明: 
Opacity:起始值,取值为0~100, 0为透明,100为原图。 
FinishOpacity:目标值。 
Style:1或2或3 
StartX:任意值 
StartY:任意值 
例子:filter:Alpha(Opacity="0",FinishOpacity="75",Style="2") 
2、滤镜:blur 
语法:STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)" 
说明: 
Add:一般为1,或0。 
Direction:角度,0~315度,步长为45度。 
Strength:效果增长的数值,一般5即可。 
例子:filter:Blur(Add="1",Direction="45",Strength="5") 
3、滤镜:Chroma 
语法:STYLE="filter:Chroma(Color = color)" 
说明:color:#rrggbb格式,任意。 
例子:filter:Chroma(Color="#FFFFFF") 
4、滤镜:DropShadow 
语法:STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)" 
说明:Color:#rrggbb格式,任意。 
Offx:X轴偏离值。 
Offy:Y轴偏离值。 
Positive:1或0。 
例子:filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1") 
5、滤镜:FlipH 
语法:STYLE="filter:FlipH" 
例子:filter:FlipH 
6、滤镜:FlipV 
语法:STYLE="filter:FlipV" 
例子:filter:FlipV 
7、滤镜:glow 
语法:STYLE="filter:Glow(Color=color, Strength=strength)" 
说明: 
Color:发光颜色。 
Strength:强度(0-100) 
例子:filter:Glow(Color="#6699CC",Strength="5") 
8、滤镜:gray 
语法:STYLE="filter:Gray" 
例子:filter:Gray 
9、滤镜:invert 
语法:STYLE="filter:Invert" 
例子:filter:Invert 
10、滤镜:mask 
语法:STYLE="filter:Mask(Color=color)" 
例子:filter:Mask (Color="#FFFFE0") 
11、滤镜:shadow 
语法:filter:Shadow(Color=color, Direction=direction) 
说明: 
Color:#rrggbb格式。 
Direction:角度,0-315度,步长为45度。 
例子:filter:Shadow (Color="#6699CC", Direction="135") 
12、滤镜:wave 
语法:filter: Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase, Strength=strength) 
说明: 
Add:一般为1,或0。 
Freq:变形值。 
LightStrength:变形百分比。 
Phase:角度变形百分比。 
Strength:变形强度。 
例子:filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2") 
13、滤镜:Xray 
语法:STYLE="filter:Xray" 
例子:filter:Xray

CSS中filter滤镜的学习笔记相关推荐

  1. CSS中flex的用法( 学习笔记 )

    flex( 弹性盒.伸缩盒 ) flex 的介绍 flex是CSS中的又一种布局手段,它主要用来代替浮动来完成页面的布局 flex可以使元素具有弹性,让元素可以随页面的大小的改变而改变 弹性容器 要使 ...

  2. css预处理器(less学习笔记)

    什么是css预处理器? CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作 ...

  3. css透明饱和度,css中filter:alpha透明度使用

    css中filter:alpha透明度使用 使用filter可以设置透明度,filter:alpha在IE下是没有问题的,要支持firefox就需要使用-moz-opacity,下面有个不错的示例,大 ...

  4. web前端分享HTML5中的nav标签学习笔记

    好程序员web前端分享HTML5中的nav标签学习笔记,nav标签全称navigation,顾名思义,是导航的意思.根据HTML5的相关标准定义如下: "A section of a pag ...

  5. 数据库LINQ TO SQL在Silverlight中的应用(WCF)------学习笔记(一)

    数据库LINQ TO SQL在Silverlight中的应用(WCF)------学习笔记(一) 步骤: 1. 创建SILVERLIGHT应用程序 2. 创建LINQ TO SQL [注意序列化的问题 ...

  6. C++ 中 参数包 (typename ...) 学习笔记

    C++ 中 参数包 (typename -) 学习笔记 本文所属地址 https://www.lucien.ink 起因 突然好奇 STL 的 std::tuple 是怎么实现不定参数的,遂搜了搜,发 ...

  7. textarea中插入标签_HTMLCSS学习笔记(二)-- HTML表单标签

    表单 1 : 表单标签 <form></form> 属性 : action = '接口地址' method = 'get / post' name = '表单名称' 2 : 表 ...

  8. 前端「HTML+CSS」零基础入门学习笔记

    HTML+CSS入门笔记目录 一.HTML 简介 1.HTML是什么? 2.什么是HTML标签? 二.HTML 文档结构 1.HTML基本结构 2.文档类型声明标签 3.lang语言属性 4.字符集与 ...

  9. linux rcs文件中的ip,linux学习笔记之diff和patch命令

    关键字:Linux 学习笔记 运维 系统 命令 一.命令的功能 diff命令的功能为逐行比较两个文本文件,列出其不同之处.可是做成diff记录也就是补丁. patch就是利用diff制作的补丁来打到文 ...

  10. linux中内核中machine_desc,Linux-内核-学习笔记(13):移植三星官方内核

    Linux-内核-学习笔记(13):移植三星官方内核 一.移植前的准备 当拿到源代码时,首先要在window下利用SourceInsight创建一个工程,并将uboot源代码加载到SI中,方便修改和查 ...

最新文章

  1. Linux访问Windows磁盘实现共享
  2. SANBoot安装系统
  3. 使用Postman测试导入和导出excel
  4. 5G NGC — UE 的二次鉴权(Secondary Authentication)方案
  5. Java使用AES加密解密
  6. [云炬Python学习笔记] Python读取指定文件夹下的文件
  7. linux java远程调试_idea远程linux代码调试
  8. java中如何引用非静态变量_java为什么不能从静态环境引用非静态变量?
  9. 错误票据java_【蓝桥杯】错误票据 - osc_bskh1wlw的个人空间 - OSCHINA - 中文开源技术交流社区...
  10. PgSQL · 最佳实践 · 从 MaxCompute (ODPS) 迁移数据到 HybridDB
  11. python-requests数据驱动延伸
  12. Java 基于UDP 实现单播、组播、广播 Socket 编程
  13. “配置系统未能初始化” 异常解决
  14. Deep Spatio-Temporal Residual Networks(深度时空残差神经网络)
  15. android10怎么截屏,安卓手机怎么截图?安卓手机截图方法大全
  16. 三种方法解决苹果手机签名问题
  17. python动态规划爬楼梯_Python走楼梯问题解决方法示例
  18. 微信公众号多域名回调系统
  19. Uncaught SyntaxError: The requested module ‘/node_modules/.vite/vue.js?v=bd1817bb‘ does not provide
  20. 宝塔Linux面板命令大全(详细完整版)

热门文章

  1. 红米note7html5测试,红米Note 7 Pro评测:千元王者名副其实
  2. 蓝屏代码大全_电脑出现蓝屏怎么找到原因进行修复?
  3. 六、Shell echo命令
  4. 国务院印发《政务信息资源共享管理暂行办法》
  5. jfinal中Interceptor拦截器的使用
  6. 李洪强iOS经典面试题34-求两个链表表示的数的和
  7. (三十六)让常量只读——const限定符
  8. Photoshop入门教程十个点
  9. visualcreators.com公司产品过滤漏洞!
  10. 程序员——知识 [转载]