| 订阅 | 在线投稿
分享
 
 
 

CSS扩展滤镜属性及语法

来源:互联网网民  宽屏版  评论
2008-08-09 06:57:28

CSS滤镜:

1.Alpha滤镜

语法:

Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)

代码:

<font style="font-size:30pt;filter:alpha(opacity=100,style=3);width:100%; color:red;line-height:150%;font-family:华文行楷"><b>CSS滤镜实例</b></font>

从效果中我们可以看出,Alpha滤镜使对象呈渐变透明的效果,其效果是由脚本中的filter:alpha(opacity=100,style=3)来决定的。其中:

opacity属性:设置透明度,取值0至100之间的任意数值,100表示完全不透明; style属性:设置渐变风格,0表示均匀渐变,1表示线性渐变,2表示放射渐变,3表示直角渐变。

而width:100%则表示参与渐变的对象的宽度,通常都设置为100%。

2. Blur滤镜

语法:

Blur(Add=?, Direction=?, Strength=?)

Motion Blur滤镜表现的是一种模糊效果。其ADD属性是用来确定是否在运动模糊中使用原有目标,其值为0和1,0表示“否”,用于文字,1表示“是”,用于图像;Direction属性是模糊移动的角度,其值为0至360度;Strength属性是模糊移动的距离。

代码:

<font style="font-size:30pt;filter:blur(add=1,direction=30,strength=5);width:100%; color:red;line-height:150%;font-family:华文行楷"><b>CSS滤镜实例</b></font>

3.Chroma 滤镜

语法:

{filter:chroma(color=color)}

使用”Chroma"属性可以设置一个对象中指定的颜色为透明色,参数COLOR即要透明的颜色。

4.Drop Shadow滤镜

语法:

DropShadow(Color=?, OffX=?, OffY=?, Positive=?)

Drop Shadow滤镜主要产生重叠效果。其属性为:

color属性:设置影子文本的颜色;

offX和offY属性:影子文本下落的位移值;

Positive属性:指定透明象素阴影,布尔型,0为是,1为否。

代码:

<font style="font-size:30pt;filter:dropshadow(color=lightgreen,offx=5,offy=3,positive=1);width:100%; color:red;line-height:150%;font-family:华文行楷"><b>CSS滤镜实例</b></font>

5.Flip滤镜

Flip滤滤镜主要是产生两种变换效果,即上下变换和左右变换。FlipV产生上下变换,FlipH产生左右变换。

代码:

<font style="font-size:30pt;filter:flipv(color=silver);width:100%; color:red;line-height:150%;font-family:华文行楷"><b>CSS滤镜实例</b></font>

<p align=right><font style="font-size:30pt;filter:fliph(color=silver);width:100%; color:red;line-height:150%;font-family:华文行楷"><b>CSS滤镜实例</b></font></p>

6.Glow滤镜

语法:

Glow(Color=?, Strength=?)

Glow滤镜生成一种光晕效果。属性:

color属性:光晕颜色;strength:光晕的厚度。

代码:

<font style="font-size:30pt;filter:glow(color=gray,strength=4);width:100%; color:red;line-height:150%;font-family:华文行楷"><b>CSS滤镜实例</b></font>

7.Light 滤镜

这个属性模拟光源的投射效果。一旦为对象定义了“LIGHT"滤镜属性,那么就可以调用它的“方法(Method)"来设置或者改变属性。“LIGHT"可用的方法有:

·AddAmbient 加入包围的光源

·AddCone 加入锥形光源

·AddPoint 加入点光源

·Changcolor 改变光的颜色

·Changstrength 改变光源的强度

·Clear 清除所有的光源

·MoveLight 移动光源

可以定义光源的虚拟位置,以及通过调整X轴和Y轴的数值来控制光源焦点的位置,还可以调整光源的形式(点光源或者锥形光源)指定光源是否模糊边界、光源的颜色、亮度等属性。如果动态的设置光源,可能回产生一些意想不到的效果。

8.Shadow滤镜

语法:

Shadow(Color=?, Direction=?)

与Drop Shadow的影子特性不同,Shadow滤镜产生一种阴影效果,它的属性比较简单:

color属性:阴影颜色;

direction属性:阴影角度,值取0至360度。

代码:

<font style="font-size:30pt;filter:shadow(color=black,direction=180);width:100%; color:red;line-height:150%;font-family:华文行楷"><b>CSS滤镜实例</b></font>

9.Wave滤镜

语法:

Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)

此滤镜对过滤对象生成正弦波变形,造成一种变幻效果。内嵌属性:

add属性:布尔型,0或1,0表示将原始对象加入最后效果中,1则反之;

freq属性:决定显示的频率,即应出现多少个波形;

phrase属性:决定波形的形状,值取0至360之间;

strength属性:决定波形的振幅。

代码:

<font style="font-size:30pt;filter:wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30);width:100%; color:red;line-height:150%;font-family:华文行楷"><b>CSS滤镜实例</b></font>

10.Gray ,Invert,Xray 滤镜

语法:

{filter:gray} ,{filter:invert},{filter:xray}

Gray滤镜是把一张图片变成灰度图;Invert滤镜是把对象的可视化属性全部翻转,包括色彩、饱和度、和亮度值;Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮,也就是所谓的“X”光片。

代码:

提示:CSS滤镜还经常用来修饰图像。比如用Flip滤镜,就可以使图像倒过来显示。最后请注意:要使用CSS滤镜,只有在HTML编辑模式下编辑发布才有效果。

 
特别声明:以上内容(如有图片或视频亦包括在内)为网络用户发布,本站仅提供信息存储服务。
 
CSS滤镜: 1.Alpha滤镜 语法: Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?) 代码: <font style="font-size:30pt;filter:alpha(opacity=100,style=3);width:100%; color:red;line-height:150%;font-family:华文行楷"><b>CSS滤镜实例</b></font> 从效果中我们可以看出,Alpha滤镜使对象呈渐变透明的效果,其效果是由脚本中的filter:alpha(opacity=100,style=3)来决定的。其中: opacity属性:设置透明度,取值0至100之间的任意数值,100表示完全不透明; style属性:设置渐变风格,0表示均匀渐变,1表示线性渐变,2表示放射渐变,3表示直角渐变。 而width:100%则表示参与渐变的对象的宽度,通常都设置为100%。 2. Blur滤镜 语法: Blur(Add=?, Direction=?, Strength=?) Motion Blur滤镜表现的是一种模糊效果。其ADD属性是用来确定是否在运动模糊中使用原有目标,其值为0和1,0表示“否”,用于文字,1表示“是”,用于图像;Direction属性是模糊移动的角度,其值为0至360度;Strength属性是模糊移动的距离。 代码: <font style="font-size:30pt;filter:blur(add=1,direction=30,strength=5);width:100%; color:red;line-height:150%;font-family:华文行楷"><b>CSS滤镜实例</b></font> 3.Chroma 滤镜 语法: {filter:chroma(color=color)} 使用”Chroma"属性可以设置一个对象中指定的颜色为透明色,参数COLOR即要透明的颜色。 4.Drop Shadow滤镜 语法: DropShadow(Color=?, OffX=?, OffY=?, Positive=?) Drop Shadow滤镜主要产生重叠效果。其属性为: color属性:设置影子文本的颜色; offX和offY属性:影子文本下落的位移值; Positive属性:指定透明象素阴影,布尔型,0为是,1为否。 代码: <font style="font-size:30pt;filter:dropshadow(color=lightgreen,offx=5,offy=3,positive=1);width:100%; color:red;line-height:150%;font-family:华文行楷"><b>CSS滤镜实例</b></font> 5.Flip滤镜 Flip滤滤镜主要是产生两种变换效果,即上下变换和左右变换。FlipV产生上下变换,FlipH产生左右变换。 代码: <font style="font-size:30pt;filter:flipv(color=silver);width:100%; color:red;line-height:150%;font-family:华文行楷"><b>CSS滤镜实例</b></font> <p align=right><font style="font-size:30pt;filter:fliph(color=silver);width:100%; color:red;line-height:150%;font-family:华文行楷"><b>CSS滤镜实例</b></font></p> 6.Glow滤镜 语法: Glow(Color=?, Strength=?) Glow滤镜生成一种光晕效果。属性: color属性:光晕颜色;strength:光晕的厚度。 代码: <font style="font-size:30pt;filter:glow(color=gray,strength=4);width:100%; color:red;line-height:150%;font-family:华文行楷"><b>CSS滤镜实例</b></font> 7.Light 滤镜 这个属性模拟光源的投射效果。一旦为对象定义了“LIGHT"滤镜属性,那么就可以调用它的“方法(Method)"来设置或者改变属性。“LIGHT"可用的方法有: ·AddAmbient 加入包围的光源 ·AddCone 加入锥形光源 ·AddPoint 加入点光源 ·Changcolor 改变光的颜色 ·Changstrength 改变光源的强度 ·Clear 清除所有的光源 ·MoveLight 移动光源 可以定义光源的虚拟位置,以及通过调整X轴和Y轴的数值来控制光源焦点的位置,还可以调整光源的形式(点光源或者锥形光源)指定光源是否模糊边界、光源的颜色、亮度等属性。如果动态的设置光源,可能回产生一些意想不到的效果。 8.Shadow滤镜 语法: Shadow(Color=?, Direction=?) 与Drop Shadow的影子特性不同,Shadow滤镜产生一种阴影效果,它的属性比较简单: color属性:阴影颜色; direction属性:阴影角度,值取0至360度。 代码: <font style="font-size:30pt;filter:shadow(color=black,direction=180);width:100%; color:red;line-height:150%;font-family:华文行楷"><b>CSS滤镜实例</b></font> 9.Wave滤镜 语法: Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?) 此滤镜对过滤对象生成正弦波变形,造成一种变幻效果。内嵌属性: add属性:布尔型,0或1,0表示将原始对象加入最后效果中,1则反之; freq属性:决定显示的频率,即应出现多少个波形; phrase属性:决定波形的形状,值取0至360之间; strength属性:决定波形的振幅。 代码: <font style="font-size:30pt;filter:wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30);width:100%; color:red;line-height:150%;font-family:华文行楷"><b>CSS滤镜实例</b></font> 10.Gray ,Invert,Xray 滤镜 语法: {filter:gray} ,{filter:invert},{filter:xray} Gray滤镜是把一张图片变成灰度图;Invert滤镜是把对象的可视化属性全部翻转,包括色彩、饱和度、和亮度值;Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮,也就是所谓的“X”光片。 代码: 提示:CSS滤镜还经常用来修饰图像。比如用Flip滤镜,就可以使图像倒过来显示。最后请注意:要使用CSS滤镜,只有在HTML编辑模式下编辑发布才有效果。
󰈣󰈤
 
 
 
>>返回首页<<
 
 热帖排行
 
 
 
静静地坐在废墟上,四周的荒凉一望无际,忽然觉得,凄凉也很美
©2005- 王朝网络 版权所有