当前位置：网站首页 >> 网站技术 >>

网站制作中几个常用的CSS滤镜介绍

发布人：郑州凯讯公司    发布日期：2015-03-03

本网页展示了在网站制作中的几个常用的CSS滤镜(CSS filter)介绍，这些CSS滤镜可以用在网页制作上，可以制作出非常美观的界面。CSS滤镜属性只能用在能够看得见的HTML元素上，不能使用div的id，class定义。所谓的HTML元素就是它们在页面上定义的一个矩形空间，浏览器的窗口可以显示这些正常元素。在此，郑州网站建设公司的小编整理了一些HTML上的元素和对应的说明，这些HTML元素上都可以使用CSS滤镜，列表如下：

下面列出来的这些都是
BODY 网页文档的主体元素，所有的可见范围都在元素内
BUTTON 表单域的按钮，可以有“发送(submit)”、“重置(reset)”等形式
DIV 定义了网页上的一个区域，这个区域的高度、宽度或者绝对位置都是以知的
IMG 图片元素，通过指定“src'属性来指定图片的来源
INPU T输入表单域
MARQUEE 移动字幕效果
SPAN 定义了网页上的一个区域，这个区域的高度、宽度或者绝对位置都是以知的
TABLE 表格
TD 表格数据单元格
TEXTAREA 文本区域
TFOOT 多行输入文本框
TH 表格标题单元格
THEAD 表格标题
TR 表格行

下面整理了一些CSS滤镜及其语法介绍，可供建站用户和网站建设人员参考：

CSS滤镜使用语法：STYLE="filter:filtername(fparameter1, fparameter2...)"
（Filtername为滤镜的名称，fparameter1、fparameter2等是滤镜的参数）

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
作用：使对象变得像被x光照射一样
语法：STYLE="filter:Xray"
例子：filter:Xray