cssfilter滤镜使用方法

CSS滤镜的使用方法:filter:filtername(parameters) 即 filter:滤镜名称(参数)

alpha:设置透明层次

blur:创建高速度移动效果,即模糊效果

chroma:制作专用颜色透明

DropShadow:创建对象的固定影子

FlipH:创建水平镜像图片

FlipV:创建垂直镜像图片

glow:加光辉在附近对象的边外

gray:把图片灰度化

invert:反色

light:创建光源在对象上

mask:创建透明掩膜在对象上

shadow:创建偏移固定影子

wave:波纹效果

Xray:使对象变得像被x光照射一样

具体的应用有两种方法:

1、先定义好CSS ,再在页面中需要的对象上使用预先定义好的CSS,实际上CSS的设置对话框里已经预先将这些滤镜的语法设置好了,我们只需填上适合的具体参数即可。

2、直接在支持CSS滤镜效果的HTML控件元素上编写CSS filter代码。

Alpha滤镜: 听到这个名字,你可能会想到Flash里有,Photoshop里也似乎见过。一点不错,它们的作用基本类似,就是把一个目标元素与背景混合。你可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度.

语法: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″)

Blur滤镜:是CSS的滤镜之一,把它加载到文字上,可产生立体字的效果,这将为你在网页上使用立体字做标题带来了极大的方便,也为你的网页减轻了分量;把Blur滤镜加载到图片上,能使你的图片增色不少,虽然用图象处理软件也能达到同样效果,但用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″)

Chroma滤镜:设置对象的色彩浓度

语法:STYLE=”filter:Chroma(Color = color)”

说明:color:#rrggbb格式,任意。

例子:filter:Chroma(Color=”#FFFFFF”)

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″)

FlipH滤镜:实现水平反转

语法:STYLE=”filter:FlipH”

例子:filter:FlipH

FlipV滤镜:滤镜实现垂直反转

语法:STYLE=”filter:FlipV”

例子:filter:FlipV

Glow滤镜:对一个对象使用”glow”属性后,这个对象的边缘就会产生类似发光的效果

语法:STYLE=”filter:Glow(Color=color, Strength=strength)”

说明:

Color:发光颜色。

Strength:强度(0-100)

例子:filter:Glow(Color=”#6699CC”,Strength=”5″)

Gray滤镜:使用Gray滤镜可以把一张图片变成灰度图

语法:STYLE=”filter:Gray”

例子:filter:Gray

Invert滤镜:顾名思义,使对象反转倒置

语法:STYLE=”filter:Invert”

例子:filter:Invert

Mask滤镜:使用”MASK”属性可以为对象建立一个覆盖于表面的膜,其效果就象戴着有色眼镜看物体一样

语法:STYLE=”filter:Mask(Color=color)”

例子:filter:Mask (Color=”#FFFFE0″)

Shadow滤镜:利用“Shadow”属性可以在指定的方向建立物体的投影,COLOR是投影色,DIRECTION是设置投影的方向。其中0度代表垂直向上,然后每45度为一个单位。它的默认值是向左的270度。

语法:filter:Shadow(Color=color, Direction=direction)

说明:

Color:#rrggbb格式。

Direction:角度,0-315度,步长为45度。

例子:filter:Shadow (Color=”#6699CC”, Direction=”135″)

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″)

Xray滤镜:只显示对象的轮廓

语法:STYLE=”filter:Xray”

例子:filter:Xray

给TA打赏
共{{data.count}}人
人已打赏
网站知识

css3按钮呼吸效果和代码

2023-11-27 15:41:25

网站知识

CSS虚线样式的制作方法及虚线样式的运用

2023-11-27 21:12:47

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧