反转文字（滤镜filter:Flip）吉祥如意988/编辑
一、简介
反转特效文字效果其实就是运用了滤镜filter 属性之一滤镜filter:Flip（使元素反转）。
Flip是CSS滤镜的反转属性：
FlipH代表水平方向反转
FlipV代表垂直方向反转
它们的原理都是制作一个镜像，然后让指定元素在水平或垂直方向实现反转。它们的表达式很简单，分别是：
Filter:FlipH
Filter:FlipV
更多运用在图片的反转和Filter:FlipV制作倒影字特效。
相关更多滤镜属性点击参阅：
滤镜filter 属性二、HTML相关术语
TABLE 标签是一个容器标记:<table>...</table>
P 标签定义段落容器标记:<p>...</p>
DIV标签严格的组织容器标记:<div>...</div>
EM文本倾斜<em>...</em>或者运用I文本倾斜<i>...</i>
size 属性定义的是以像素为单位的输入字段宽度。
font 规定文本的字体、字体尺寸、字体颜色。<font>...</font>
font-size 属性可设置字体的尺寸。该属性设置元素的字体大小。注意，实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。
color颜色值。
三、基本代码
水平反转
TABLE 标签基本代码：
<TABLE style="Filter:FlipH"><TR><TD><FONT color=颜色值 size=字体大小值>水平反转文字效果</FONT></table>
P 标签基本代码：
<P style="FONT-SIZE: 字体大小值pt; Filter:FlipH; WIDTH:文本框宽度px; COLOR:颜色值; HEIGHT:文本框高度px" FONT>水平反转文字效果</FONT></P>
DIV 标签基本代码：
<DIV style="Filter:FlipH; WIDTH:文本框宽度px; COLOR:颜色值; HEIGHT:文本框高度px"><FONT size=字体大小值>水平反转文字效果</FONT></DIV>
垂直反转
TABLE 标签基本代码：
<TABLE style="Filter:Flipv"><TR><TD><FONT color=颜色值 size=字体大小值>垂直反转文字效果</FONT></table>
P 标签基本代码：
<P style="FONT-SIZE: 字体大小值pt; Filter:Flipv; WIDTH:文本框宽度px; COLOR:颜色值; HEIGHT:文本框高度px" FONT>垂直反转文字效果</FONT></P>
DIV 标签基本代码：
<DIV style="Filter:Flipv; WIDTH:文本框宽度px; COLOR:颜色值; HEIGHT:文本框高度px"><FONT size=字体大小值>垂直反转文字效果</FONT></DIV>
四、设置代码参数说明
字体颜色值：
color=#4a7ac9
字体文本框大小值：
在TABLE 标签、DIV标签内相同size=5（在DIV标签内HEIGHT: 35px设置了文本框的高度、设置了文本框宽度WIDTH: 216px）
在P 标签内font-size:18pt （实际设置了字体中字符框的高度）、设置文本框的高度HEIGHT:20pt、设置了文本框宽度WIDTH:216px
代码如下：
水平反转
TABLE 标签代码：
<TABLE style="Filter:FlipH"><TR><TD><FONT color=#4a7ac9 size=5>水平反转文字效果</FONT></TD></TR></table>
P 标签代码：
<P style="FONT-SIZE: 18pt; Filter:FlipH; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT>水平反转文字效果</FONT></P>
DIV 标签代码：
<DIV style="Filter:FlipH; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5>水平反转文字效果</FONT></DIV>
垂直反转
TABLE 标签代码：
<TABLE style="Filter:Flipv"><TR><TD><FONT color=#4a7ac9 size=5>垂直反转文字效果</FONT></TD></TR></table>
P 标签代码：
<P style="FONT-SIZE: 18pt; Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT>垂直反转文字效果</FONT></P>
DIV 标签代码：
<DIV style="Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5>垂直反转文字效果</FONT></DIV>
倒影字特效
TABLE 标签代码：
<TABLE><TR><TD><FONT color=#4a7ac9 size=5><em>倒影文字效果</em></FONT></TD></TR></table>
<TABLE style="Filter:Flipv"><TR><TD><FONT color=#4a7ac9 size=5><em>倒影文字效果</em></FONT></TD></TR></table>
P 标签代码：
<P style="FONT-SIZE: 18pt; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT><em>倒影文字效果</em></FONT></P>
<P style="FONT-SIZE: 18pt; Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT><em>倒影文字效果</em></FONT></P>
DIV 标签代码：
<DIV style="WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5><em>倒影文字效果</em></FONT></DIV>
<DIV style="Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5><em>倒影文字效果</em></FONT></DIV>
五、代码演示示例
水平反转
TABLE 标签代码：
<TABLE style="Filter:FlipH"><TR><TD><FONT color=#4a7ac9 size=5>水平反转文字效果</FONT></TD></TR></table>
水平反转文字效果
P 标签代码：
<P style="FONT-SIZE: 18pt; Filter:FlipH; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT>水平反转文字效果</FONT></P>
水平反转文字效果
DIV 标签代码：
<DIV style="Filter:FlipH; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5>水平反转文字效果</FONT></DIV>
水平反转文字效果
垂直反转
TABLE 标签代码：
<TABLE style="Filter:Flipv"><TR><TD><FONT color=#4a7ac9 size=5>垂直反转文字效果</FONT></TD></TR></table>
垂直反转文字效果
P 标签代码：
<P style="FONT-SIZE: 18pt; Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT>垂直反转文字效果</FONT></P>
垂直反转文字效果
DIV 标签代码：
<DIV style="Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5>垂直反转文字效果</FONT></DIV>
垂直反转文字效果
倒影字特效
TABLE 标签代码：
<TABLE><TR><TD><FONT color=#4a7ac9 size=5><em>倒影文字效果</em></FONT></TD></TR></table>
<TABLE style="Filter:Flipv"><TR><TD><FONT color=#4a7ac9 size=5><em>倒影文字效果</em></FONT></TD></TR></table>
倒影文字效果
倒影文字效果
P 标签代码：
<P style="FONT-SIZE: 18pt; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT><em>倒影文字效果</em></FONT></P>
<P style="FONT-SIZE: 18pt; Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT><em>倒影文字效果</em></FONT></P>
倒影文字效果
倒影文字效果
DIV 标签代码：
<DIV style="WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5><em>倒影文字效果</em></FONT></DIV>
<DIV style="Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5><em>倒影文字效果</em></FONT></DIV>
倒影文字效果
倒影文字效果
http://jxry988.360doc.com 吉祥如意988-360doc个人图书馆
