文字光影效果實(shí)際是濾鏡效果。本文介紹的內(nèi)容有：陰影字、立體字、投影字和其他光影效果及代碼。
1、陰影字配色比較容易一點(diǎn)，只要不與網(wǎng)頁(yè)顏色相同或相近，字體可以是任何顏色，陰影顏色比字體顏色淡。
2、立體字其實(shí)也是陰影字，其效果是通過(guò)字體和陰影兩種顏色對(duì)比來(lái)表現(xiàn)的，色差越大立體感越強(qiáng)。
3、投影字可以設(shè)置三種顏色，即字體顏色、發(fā)光顏色和投影顏色，通常發(fā)光顏色和投影顏色是相同的。投影字配色與發(fā)光字基本相似，您可以參照發(fā)光字體的方法給投影字配色。
陰影字
例1、
代碼：
<CENTER><FONT style="COLOR:#DED687; FILTER: shadow(color=black); FONT-FAMILY: 宋體; FONT-SIZE: 24pt; LINE-HEIGHT:120%; WIDTH: 100%"><B>陰影字效果陰影字效果</B></FONT></CENTER>
------------------------------------------------------
例2、
|
古詩(shī)一首 白居易
昔年八月十五夜，曲江池畔杏園邊。
今年八月十五夜，湓浦沙頭水館前。
西北望鄉(xiāng)何處是，東南見(jiàn)月幾回圓。
昨風(fēng)一吹無(wú)人會(huì)，今夜清光似往年。
|
代碼：
<table width="500px" border="0" align="center" bgcolor="#E8E8FF">
<tr><td><p><FONT style="COLOR:#F24F00 ; FILTER: shadow(color=#ACACAC ); FONT-FAMILY: 隸書(shū); FONT-SIZE: 24px; LINE-HEIGHT:150%; WIDTH:100%">
<div align="center";><br>古詩(shī)一首 白居易
</div><div align="center">
昔年八月十五夜，曲江池畔杏園邊。
<br>今年八月十五夜，湓浦沙頭水館前。
<br>西北望鄉(xiāng)何處是，東南見(jiàn)月幾回圓。
<br>昨風(fēng)一吹無(wú)人會(huì)，今夜清光似往年。
</div></FONT></p></td></tr></table>
立體字
例1、
代碼：
<DIV align=center><FONT style="FONT-SIZE: 24pt; FILTER: shadow(color=green direction=45); WIDTH: 100%;
COLOR: #FFCC00; LINE-HEIGHT: 150%; FONT-FAMILY: 仿宋_GB2312"><B>立體字效果立體字效果</B></FONT></p></DIV>
------------------------------------------------------
例2、
立體字效果立體字效果
代碼：
<STRONG><p align=center><FONT style="FONT-SIZE:30pt; FILTER: shadow(color=#0000ee direction=225); WIDTH: 100%;
COLOR: #ff0000; LINE-HEIGHT: 120%; FONT-FAMILY: 隸書(shū)">立體字效果立體字效果</FONT></p></STRONG>
投影字
例1、
代碼：
<TABLE align=center >
<DIV align=center>
<DIV style="FILTER: glow(color=#ff0000 strength=8); WIDTH: 100%; COLOR: #ff00ff"; >
<DIV style="FILTER: shadow(color=#ff0000, strength=25 direction=45); WIDTH: 600px; HEIGHT: 100px">
<FONT style="FONT-WEIGHT: normal; FONT-SIZE: 28pt; LINE-HEIGHT: 250%;
FONT-STYLE: normal; FONT-VARIANT: normal" face=華文新魏 color=#FFCCCC >
投影字效果投影字效果
</FONT></DIV></DIV></DIV></TABLE>
------------------------------------------------------
例2、
代碼：
<TABLE align=center >
<DIV align=center>
<DIV style="FILTER: glow(color=#0088FF strength=8); WIDTH: 100%; COLOR: #ff00ff"; >
<DIV style="FILTER: shadow(color=#0088FF, strength=25 direction=135); WIDTH: 600px; HEIGHT: 100px">
<FONT style="FONT-WEIGHT: normal; FONT-SIZE: 28pt; LINE-HEIGHT: normal;
FONT-STYLE: normal; FONT-VARIANT: normal" face=隸書(shū) color=#FFCCCC >
投影字效果投影字效果
</FONT></DIV></DIV></DIV></TABLE>
------------------------------------------------------
例3、
代碼：
<TABLE align=center >
<DIV align=center>
<DIV style="FILTER: glow(color=#9900CC strength=8); WIDTH: 100%; COLOR: #ff00ff"; >
<DIV style="FILTER: shadow(color=#9900CC, strength=25 direction=225); WIDTH: 600px; HEIGHT: 100px">
<FONT style="FONT-WEIGHT: normal; FONT-SIZE: 28pt; LINE-HEIGHT: 250%;
FONT-STYLE: normal; FONT-VARIANT: normal" face=華文新魏 color=#FFCCCC >
投影字效果投影字效果
</FONT></DIV></DIV></DIV></TABLE>
------------------------------------------------------
例4、
代碼：
<TABLE align=center >
<DIV align=center>
<DIV style="FILTER: glow(color=#FF00FF strength=8); WIDTH: 100%; COLOR: #ff00ff"; >
<DIV style="FILTER: shadow(color=#FF00FF, strength=25 direction=315); WIDTH: 600px; HEIGHT: 100px">
<FONT style="FONT-WEIGHT: normal; FONT-SIZE: 28pt; LINE-HEIGHT: 250%;
FONT-STYLE: normal; FONT-VARIANT: normal" face=隸書(shū) color=#FFCCCC >
投影字效果投影字效果
</FONT></DIV></DIV></DIV></TABLE>
文字其他光影效果
例1、倒影字
倒影字效果倒影字效果
倒影字效果倒影字效果
代碼：
<DIV align=center><FONT SIZE=5 style="WIDTH: 100%; COLOR:#ff0000; LINE-HEIGHT: 90%; FONT-FAMILY: 黑體"><br><b>倒影字效果倒影字效果</b></FONT><FONT SIZE=5 style="FILTER: FlipV; WIDTH: 100%; COLOR:#ff9999; LINE-HEIGHT: 90%; FONT-FAMILY:黑體"><b>倒影字效果倒影字效果</b></FONT></DIV>
-----------------------------------------------------
例2、重影字
重影字效果重影字效果
代碼：
<DIV align=center><FONT style="FONT-SIZE: 22pt; FILTER: dropshadow(color=#00aa88,offX=4,offY=-2,Positive=true); WIDTH: 100%; COLOR: #FF0000; LINE-HEIGHT: 150%; FONT-FAMILY:黑體"><B>重影字效果重影字效果</B></FONT></DIV>
------------------------------------------------------
例3、左右翻轉(zhuǎn)
左右翻轉(zhuǎn)效果左右翻轉(zhuǎn)效果
代碼：
<DIV align=center>
<FONT face=楷體_GB2312 color=00FF00 size=6><font style="filter:FlipH;height:8pt;">左右翻轉(zhuǎn)效果</font>左右翻轉(zhuǎn)效果</DIV>
附：用濾鏡不僅能制成發(fā)光文字，而且還能制成發(fā)光圖片，使圖片邊緣產(chǎn)生光影效果。這里只舉三個(gè)例子：
例1、給圖片加發(fā)光的邊框
代碼：
<div margin-top:0px; style="width:100%; font-size:80px; filter: glow(color=#0000FF, strength=30);">
<p align="center"><br>
<IMG src="http://image48.360doc.com/DownloadImg/2011/12/1922/20154378_1.jpg"></p></div>
例2、給圖片加投影（或圖片立體效果）
代碼：
<TABLE align=center ><DIV align=center>
<DIV style="FILTER: glow(color=#00FF00 strength=6); WIDTH: 100%; COLOR: #ff00ff"; >
<DIV style="FILTER: shadow(color=#00FF00, strength=20 direction=45); WIDTH: 600px; HEIGHT: 10px">
<FONT style="FONT-WEIGHT: normal; FONT-SIZE: 28pt; LINE-HEIGHT: 100%;
FONT-STYLE: normal; FONT-VARIANT: normal" face=華文新魏 color=#FFCCCC >
<br><IMG src="http://image48.360doc.com/DownloadImg/2011/12/1922/20154378_2.jpg">
</FONT></DIV></DIV></DIV></TABLE>
例3、仿制宮燈效果
代碼：
<div style="width:100%; font-size:40px; line-height:120%; filter: glow(color=#FF0000, strength=20); height:125">
<br><p align="center">
<IMG src=http://image48.360doc.com/DownloadImg/2011/12/1922/20154378_3.jpg">
<IMG src="http://image48.360doc.com/DownloadImg/2011/12/1922/20154378_4.jpg">
<IMG src="http://image48.360doc.com/DownloadImg/2011/12/1922/20154378_5.jpg">
<IMG src="http://image48.360doc.com/DownloadImg/2011/12/1922/20154378_6.jpg">
</div>
