HTML文字代码——渐变文字（滤镜filter:alpha）HTML文字代码——反转文字（滤镜filter:Flip）HTML文字代码——模糊文字（滤镜filter:blur）
2011-03-18 23:14:50| 分类：
HTML专区 | 标签：
html |举报 |字号
HTML
模糊文字（滤镜filter:blur）
模糊文字（滤镜filter:blur）博文简介
模糊特效文字效果其实就是运用了滤镜filter 属性之一滤镜filter:blur（使元素模糊）。
相关更多滤镜属性点击链接参照：
滤镜filter 属性1、HTML相关术语：
TABLE 标签是一个容器标记:<table>...</table>
P 标签定义段落容器标记:<p>...</p>
DIV标签严格的组织容器标记:<div>...</div>
filter:blur（使元素模糊）
语法：
filter:blur(add=true, direction=90, strength=6);
add：是否要在已经使用Blur滤镜上的html对象上显示原来的模糊方向，0表示不显示
direction：模糊方向
左上角模糊 direction=315
右上角模糊 direction=45
左下角模糊 direction=215
右下角模糊 direction=135
向右direction=90
向左direction=180
strength：模糊半径大小，单位像素，默认为6。
size 属性定义的是以像素为单位的输入字段宽度。
font 规定文本的字体、字体尺寸、字体颜色。<font>...</font>
font-size 属性可设置字体的尺寸。该属性设置元素的字体大小。注意，实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。
color颜色值。
2、基本代码：
TABLE 标签基本代码：
<TABLE style="filter:blur(add=true, direction=模糊方向, strength=模糊半径)"><TR><TD><FONT color=颜色值 size=字体大小值>模糊文字效果</FONT></TD></TR></table>
P 标签基本代码：
<P style="FONT-SIZE: 字体大小值pt; FILTER: blur(add=true, direction=模糊方向, strength=模糊半径); WIDTH:文本框宽度px; COLOR:颜色值; HEIGHT:文本框高度px" FONT>模糊文字效果</FONT></P>
DIV 标签基本代码：
<DIV style="FILTER: blur(add=true, direction=模糊方向, strength=模糊半径); WIDTH:文本框宽度px; COLOR:颜色值; HEIGHT:文本框高度px"><FONT size=字体大小值>模糊文字效果</FONT></DIV>
3、设置示例：
设置代码参数说明
字体颜色值:
color=#< xmlnamespace prefix ="st1" ns ="urn:schemas-microsoft-com:office:smarttags" />4a7ac9
字体文本框大小值：
在TABLE 标签、DIV标签内相同size=5（在DIV标签内HEIGHT: 35px设置了文本框的高度、设置了文本框宽度WIDTH: 155px）
在P 标签内font-size:18pt （实际设置了字体中字符框的高度）、设置文本框的高度HEIGHT:20pt、设置了文本框宽度WIDTH:149px
设置的模糊值：
add=true或add=1
direction=90
strength=6
代码如下：
TABLE 标签代码：
<TABLE style="filter:blur(add=true, direction=90, strength=6)"><TR><TD><FONT color=#4a7ac9 size=5>模糊文字效果</FONT></TD></TR></table>
P 标签代码：
<P style="FONT-SIZE: 18pt; FILTER: blur(add=true, direction=90, strength=6); WIDTH: 149px; COLOR:#4a7ac9; HEIGHT: 20px" FONT>模糊文字效果</FONT></P>
DIV标签代码：
<DIV style="FILTER: blur(add=true, direction=90, strength=6); WIDTH: 155px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5>模糊文字效果</FONT></DIV>
代码演示示例
TABLE 标签代码：
当add=true或add=1时
<TABLE style="filter:blur(add=true, direction=90, strength=6)"><TR><TD><FONT color=#4a7ac9 size=5>模糊文字效果</FONT></TD></TR></table>
模糊文字效果
当add=0时
<TABLE style="filter:blur(add=0, direction=90, strength=6)"><TR><TD><FONT color=#4a7ac9 size=5>模糊文字效果</FONT></TD></TR></table>
模糊文字效果
P 标签代码：
当add=true或add=1时
<P style="FONT-SIZE: 18pt; FILTER: blur(add=true, direction=90, strength=6); WIDTH: 149px; COLOR:#4a7ac9; HEIGHT: 20px" FONT>
模糊文字效果</FONT></P> 模糊文字效果
当add=0时
<P style="FONT-SIZE: 18pt; FILTER: blur(add=0, direction=90, strength=6); WIDTH: 149px; COLOR:#4a7ac9; HEIGHT: 20px" FONT>模糊文字效果</FONT></P>
模糊文字效果
DIV标签代码：
当add=true或add=1时
<DIV style="FILTER: blur(add=true, direction=90, strength=6); WIDTH: 155px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5>模糊文字
效果</FONT></DIV> 模糊文字效果
当add=0时
<DIV style="FILTER: blur(add=0, direction=90, strength=6); WIDTH: 155px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5>模糊文字效果</FONT></DIV>
模糊文字效果
欢迎光临启野博客！
欢 迎 光 临 启 野 博 客 欢 迎 光 临 启 野 博 客
qy-0824推荐阅读：
HTML滤镜代码——filter 属性2011-03-18 23:04:21
HTML文字代码——发光文字（滤镜filter: glow） 2011-03-18 23:06:20
HTML文字代码——投射阴影文字（滤镜filter: Shadow） 2011-03-18 23:08:26
HTML文字代码——阴影文字（滤镜filter:dropshadow） 2011-03-18 23:11:04
HTML文字代码——渐变文字（滤镜filter:alpha） 2011-03-18 23:12:41
HTML文字代码——模糊文字（滤镜filter:blur） 2011-03-18 23:14:50
HTML文字代码——反转文字（滤镜filter:Flip） 2011-03-18 23:16:30
HTML文字代码——水波纹文字（滤镜filter:wave） 2011-03-18 23:17:57
HTML文字代码——透明文字（滤镜filter:chroma）2011-03-18 23:19:21
阅读(934)| 评论(0)
