非洲和南极洲分界线:网页制作

各种滤镜的样式

Good fun网摘

1:各种滤镜的样式，要使用滤镜的样式，须添加样式代码 style=" "

1-1：Alpha 滤镜，具有透明层次效果。

代码形式 style="filter: alpha(opacity=100,style=3)"

注解 opacity 代表透明度水准，可选值从 0-100
style 指定透明区域的样式，可选 0（代表统一形状），1（线性透明），2（放射状透明），3（方块状透明）

1-2： Blur 滤镜，模糊效果

代码形式 style="filter: blur(add=1,direction=30,strength=5)"

add 属性是用来确定是否在运动模糊中使用原有目标，可选值 0（表示否，一般用来处理文字），1 （表示是，一般用来处理图片）。
direction 属性用来是设置模糊的方向，可选值 0-360，要是不指定的情况下，默认是270。
strength 属性，代表有多少像素受到模糊的影响。只能用整数来指定，不指定的请宽下默认值是 5。

1-3：Shadow 滤镜，阴影投射效果

代码形式：style="filter: shadow(color=black,direction=180)"

color 投射的阴影颜色属性。
direction 阴影投射的角度，可选 0-360。

1-4：DropShadow 滤镜，产生重叠效果。

代码形式：style="filter: dropshadow(color=lightgreen,offX=5,offY=3,Positive=1)"

color 重叠的颜色
offX 阴影投射的X轴位置
offY 阴影投射的Y轴位置
Positive 指定透明象素阴影，布尔型，0为是，1为否

1-5：Wave 滤镜，正弦波变形
代码形式：style="filter: wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30)"

add 布尔型，0或1，0表示将原始对象加入最后效果中，1则反之
lightstrength 对波纹增加光影效果，可选0-100
strength 表示振幅的大小
freq 表示波纹的频率，在指定的对象上要产生多少个完整的波纹
phrase 设置正弦波的偏移量，可选 0-100

1-6：Glow 滤镜，光晕效果
代码形式 style="filter: glow(color=gray,strength=4)"
color 光晕颜色
strength 光晕的厚度。

1-7: FlipV 滤镜, FlipH 滤镜
代码形式： style="filter: FlipV"
Flip滤滤镜主要是产生变换效果，即上下变换和左右变换。
FlipV产生上下变换，
FlipH产生左右变换

1-8：gray 黑白滤镜，（多用于图片的转换。黑白效果）
代码形式 style="filter: gray"

1-9： invert 反色滤镜，（多用于图片）
代码形式： style="filter: invert"

1-10：Xray 滤镜，使对象变得像被 x光照射一样，（多用于图片）
代码形式： style="filter:Xray"

1-11： Chroma 滤镜，可以设置一个对象中指定的颜色为透明色
代码形式：style="filter:chroma(color=#000000)"

2-1: alpha滤镜的使用在文字上的应用。

alpha滤镜文字的使用
alpha滤镜文字的使用
alpha滤镜文字的使用
alpha滤镜文字的使用

2-2: Blur滤镜的使用在文字上的应用。

Blur滤镜文字的使用

2-3: shadow滤镜的使用在文字上的应用。

shadow滤镜文字的使用

2-4: dropshadow滤镜的使用在文字上的应用。

dropshadow滤镜文字的使用

2-5: wave滤镜的使用在文字上的应用。(第二个添加了倒影的滤镜）

wave滤镜文字的使用

wave滤镜文字的使用

wave滤镜文字的使用

2-6: glow滤镜的使用在文字上的应用。

glow滤镜文字的使用
glow滤镜文字的使用

2-7: FlipV滤镜的使用在文字上的应用。

FlipV滤镜文字的使用

FlipV滤镜文字的使用

2-8: chroma滤镜的使用在文字上的应用。

有些朋友可能不知道用途！这里Good fun就简单的介绍一下：

就拿第一个滤镜为例，你要加到图片上，就是在代码里添加一个滤镜属性就可以了！

比如，普通的贴图代码是：“”

就像这张图，他的代码就是：“src="

那么代码就变成：“http://image36.360doc.com/DownloadImg/2011/09/0622/17166453_1.jpg

这个就是我们常见的渐变效果，有兴趣的朋友你可以一个个试试。

提示：只有自己的html网站和网页才能全部显示，博客空间不同，支持的代码显示也不一样！网易博客对好多滤镜代码都给屏蔽了，有些不能被显示！