本周排行
最新更新
CSS滤镜
CSS（Cascading Style Sheets) 中文翻译为 层叠样式表单，简称样式单。它是近几年才发展起来的新技术，1998年5月12日，Cascading Style Sheets,level 2 成为了W3C 的新标准。同时,”W3C CoreStyles "和CSS2 Validation Service" 以及“CSS Test Suite" 宣布成立。它是一组样式，样式中的属性在HTML元素中依次出现，并显示在浏览器中。样式可以定义在HTML文档的标志（TAG）里，也可以在外部附加文档作为外加文档。此时，一个样式表单可以作用于多个页面---甚至整个站点，因此具有更好的易用性和扩展性。我个人认为CSS好比是HTML语言的PLUSIN（插件），插件的功能大家应该知道，就是壮大原有的功能。你可以精确的控制主页里的每一个元素，比如一个字，用CSS你可以给它控制它的前景色、背景色、背景图片、在页面的精确位置，四周加入边框等。可以说CSS的功能是无比的强大。W3C 也极力向世界推广这一先进技术。
随着网页设计技术的发展，人们已经不满足于原有的一些HTML标记，而是希望能够为页面添加一些多媒体属性，例如滤镜的和渐变的效果。CSS技术的飞快发展使这些需求成为了现实。从现在开始我要为大家介绍一个新的CSS扩展部分：CSS滤镜属性（Filter Properties)。使用这种技术可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上，例如图片、文本容器、以及其他一些对象。对于滤镜和渐变效果，前者是基础，因为后者就是滤镜效果的不断变化和演示更替。当滤镜和渐变效果结合到一个基本的SCRIPT小程序中后，网页设计者就可以拥有一个建立动态交互文档的强大工具。也就是CSS FILTER+ SCRIPT， 这就说明想要建立动态的文档还要一些SCRIPT （脚本语言）的基础。
滤镜说明：
alpha：设置透明层次
blur：创建高速度移动效果，即模糊效果
chroma：制作专用颜色透明
DropShadow：创建对象的固定影子
FlipH：创建水平镜像图片
FlipV：创建垂直镜像图片
glow：加光辉在附近对象的边外
gray：把图片灰度化
invert：反色
light：创建光源在对象上
mask：创建透明掩膜在对象上
shadow：创建偏移固定影子
wave：波纹效果
Xray：使对象变得像被x光照射一样
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
语法：STYLE="filter:Xray"
例子：filter:Xray
 CSS滤镜的应用：Glow代码：<DIV style="PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FILTER: progid:DXImageTransform.Microsoft.Glow(color=#00ff00,Strength=10); LEFT: 9px; PADDING-BOTTOM: 6px; WIDTH: 80%; PADDING-TOP: 6px; HEIGHT: 80px; BACKGROUND-COLOR: #ffd700"><IMG style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FLOAT: left; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid" src="http://myroom.blogdriver.com/myroom/pic/mypic06.gif"><SPAN style="FILTER: progid:DXImageTransform.Microsoft.Glow(); HEIGHT: 60px">CSS滤镜的应用：Glow</SPAN></DIV>
语法： filter : progid:DXImageTransform.Microsoft.Glow ( enabled=bEnabled , color=sColor , strength=iDistance )
属性：
特性：
说明：
环绕对象内容边缘添加辉光制作发热效果。辉光将出现在对象边界内的内容的最外轮廓之外
二、CSS滤镜的应用：Engrave CSS滤镜的应用：Engrave说明：
用灰度值为对象内容制作浮雕纹理效果。
代码：<DIV style="PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FILTER: progid:DXImageTransform.Microsoft.Engrave(); PADDING-BOTTOM: 6px; WIDTH: 80%; PADDING-TOP: 6px; HEIGHT: 80px; BACKGROUND-COLOR: #ffd700"><IMG style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid" src="http://myroom.blogdriver.com/myroom/pic/mypic02.gif">CSS滤镜的应用：Engrave</DIV> 三、CSS滤镜的应用：Emboss CSS滤镜的应用：Emboss说明：
用灰度值为对象内容制作浮雕纹理效果
代码：<DIV style="PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FILTER: progid:DXImageTransform.Microsoft.Emboss(); LEFT: 9px; PADDING-BOTTOM: 6px; WIDTH: 80%; PADDING-TOP: 6px; HEIGHT: 80px; BACKGROUND-COLOR: #ffd700"><IMG style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid" src="http://myroom.blogdriver.com/myroom/pic/mypic10.jpg">CSS滤镜的应用：Emboss</DIV> 四、CSS滤镜的应用：DropShadow CSS滤镜的应用：DropShadowCSS滤镜的应用：DropShadowCSS滤镜的应用：DropShadow五、CSS滤镜的使用：Chroma 请从下方选择滤镜参数的值。请从下方选择滤镜参数的值。六、CSS样式滤镜的应用：Blur
|
CSS样式滤镜的应用：Blur
CSS滤镜的应用
