CSS滤镜使用方法汇总

CSS滤镜使用方法汇总

ID:38033365

大小:36.50 KB

页数:3页

时间:2019-05-24

CSS滤镜使用方法汇总_第1页
CSS滤镜使用方法汇总_第2页
CSS滤镜使用方法汇总_第3页
资源描述:

《CSS滤镜使用方法汇总》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、CSS滤镜使用方法汇总在网页设计日趋标准化的今天,使用CSS样式来美化完成页面设计已经是默认的规则,通过对CSS样式的应用,设计师可以非常方便地设计出不同寻常的页面。但CSS滤镜的应用由于浏览器对滤镜兼容性的问题和执行效率低等等原因,一直没有受到太高的重视。CSS滤镜的使用方法:filter:filtername(parameters) 即filter:滤镜名称(参数)alpha:设置透明层次blur:创建高速度移动效果,即模糊效果chroma:制作专用颜色透明DropShadow:创建对象的固定影子FlipH:创建水平镜像图片FlipV:创建垂直

2、镜像图片glow:加光辉在附近对象的边外gray:把图片灰度化invert:反色light:创建光源在对象上mask:创建透明掩膜在对象上shadow:创建偏移固定影子wave:波纹效果Xray:使对象变得像被x光照射一样具体的应用有两种方法:1、先定义好CSS,再在页面中需要的对象上使用预先定义好的CSS,实际上CSS的设置对话框里已经预先将这些滤镜的语法设置好了,我们只需填上适合的具体参数即可:2、直接在支持CSS滤镜效果的HTML控件元素上编写CSSfilter代码。A,Alpha”滤镜:听到这个名字,你可能会想到Flash里有,Phot

3、oshop里也似乎见过。一点不错,它们的作用基本类似,就是把一个目标元素与背景混合。你可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度.语法:STYLE=”filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)”说明:Opacity:起始值,取值为0~100,0为透明,100为原图。FinishOpacity:目标值。S

4、tyle:1或2或3StartX:任意值3StartY:任意值例子:filter:Alpha(Opacity=”0″,FinishOpacity=”75″,Style=”2″)B,滤镜:是CSS的滤镜之一,把它加载到文字上,可产生立体字的效果,这将为你在网页上使用立体字做标题带来了极大的方便,也为你的网页减轻了分量;把Blur滤镜加载到图片上,能使你的图片增色不少,虽然用图象处理软件也能达到同样效果,但用Blur滤镜可方便多了.语法:STYLE=”filter:Blur(Add=add,Direction=direction,Strength=st

5、rength)”说明:Add:一般为1,或0。Direction:角度,0~315度,步长为45度。Strength:效果增长的数值,一般5即可。例子:filter:Blur(Add=”1″,Direction=”45″,Strength=”5″)C,Chroma滤镜:设置对象的色彩浓度语法:STYLE=”filter:Chroma(Color=color)”说明:color:#rrggbb格式,任意。例子:filter:Chroma(Color=”#FFFFFF”)D,DropShadow滤镜:顾名思义就是添加对象的阴影效果。它的实际效果看上去就

6、象是原来的对象离开了页面,然后在页面上显示出该对象的投影。其工作原理是建立一个偏移量,然后加上颜色.语法: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″)F,FlipH滤镜:实现水平反转语法:STYL

7、E=”filter:FlipH”例子:filter:FlipHFlipV滤镜:滤镜实现垂直反转语法:STYLE=”filter:FlipV”例子:filter:FlipVG,glow滤镜:对一个对象使用”glow”属性后,这个对象的边缘就会产生类似发光的效果语法:STYLE=”filter:Glow(Color=color,Strength=strength)”说明:Color:发光颜色。3Strength:强度(0-100)例子:filter:Glow(Color=”#6699CC”,Strength=”5″)G,gray滤镜:使用Gray滤镜可

8、以把一张图片变成灰度图语法:STYLE=”filter:Gray”例子:filter:GrayI,invert滤镜:顾名思

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。