本实例演示如何在网页上显示文字的4种滤镜效果,即模糊效果、发光效果、阴影效果和垂直翻转效果。
以发光效果为例,响应代码如下:
<DIV style="width: 350; font-size:35pt; font-family: 隶书 ;
color: red; position: relative;
filter: glow(color=ffff00, strength=5)">发光效果
</DIV>
程序建立了DIV层后,通过把层的filter属性设置为glow,就可以为该层上的元素赋以发光效果,其中color参数为光的颜色,strength参数为发光的强度,也就是光照的范围。
<HTML>
<HEAD>
<META name="GENERATOR" content=“Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<BODY>
<DIV style="width: 350; font-size:35pt; font-family: 宋体 ;
color: red; position: relative;
filter: blur(add=1, direction=45, strength=6)">
模糊效果
</DIV>
<DIV style="width: 350; font-size:35pt; font-family: 隶书 ;
color: red; position: relative;
filter: glow(color=ffff00, strength=5)">
发光效果
</DIV>
<DIV style="width: 350; font-size:35pt; font-family: 黑体 ;
color: red; position: relative;
filter: dropshadow(color=000000, offx=5, offy=5, positive=1)">
阴影特效
</DIV>
<DIV style="width: 350; font-size:35pt; font-family: 幼圆 ;
color: red; position: relative;
filter: flipv">
垂直翻转
</DIV>
<P> </P>
</BODY>
</HTML>
保存文件,在浏览器中浏览网页文件,结果如图1-8所示。
图1-8 文字的4种滤镜效果