CSS 文字樣式技巧 (摘自一台湾网站，确实很强！)-IT技术精粹[JiShuBu.Com]-倾力打造一流IT技术平台！

CSS 文字樣式技巧 (摘自一台湾网站，确实很强！)

您现在正在浏览：首页 > CSS >

CSS 文字樣式技巧 (摘自一台湾网站，确实很强！)

作者：长风　发布时间：2008-03-08 23:17:46　来源：互联网

CSS 文字樣式技巧

　利用 CSS 樣式 (尤其是濾鏡效果), 我們可以讓單調的文字變化出更多的花樣, 以下是一些範例, 大家不妨試試看! 如果覺得不錯, 也可以修改相關的參數, 變成自己喜歡的樣子!

變色的文字
語法	<img src= width=0 height=0 onerror = "setInterval('font.style.color = Math.random()255255*255', 500)"> <font id="font">變色的文字</font>
執行結果	變色的文字

陰影文字 - 1 (預設值, 方向為 225 度)
語法	<div style="FILTER: shadow(color=6699FF); WIDTH: 100%; HEIGHT: 100%"> <FONT color=#0000FF size=4>陰影文字 - 1</font> </div>
執行結果	陰影文字 - 1

陰影文字 - 2 (方向為 45 度)
語法	<div style="FILTER: shadow(color=6699FF,direction=45); WIDTH: 100%; HEIGHT: 100%"> <FONT color=#0000FF size=4>陰影文字 - 2</font> </div>
執行結果	陰影文字 - 2

陰影文字 - 3 (方向為 135 度)
語法	<div style="FILTER: shadow(color=6699FF,direction=135); WIDTH: 100%; HEIGHT: 100%"> <FONT color=#0000FF size=4>陰影文字 - 3</font> </div>
執行結果	陰影文字 - 3

陰影文字 - 4 (方向為 315 度)
語法	<div style="FILTER: shadow(color=6699FF,direction=315); WIDTH: 100%; HEIGHT: 100%"> <FONT color=#0000FF size=4>陰影文字 - 4</font> </div>
執行結果	陰影文字 - 4

疊影文字
語法	<div style="FILTER: DropShadow(Color=CC99FF, OffX=3, OffY=3, Positive=1); WIDTH: 100%; HEIGHT: 100%"><FONT color=#000000 size=4>疊影文字</font></div>
執行結果	疊影文字

光暈文字
語法	<div style="FILTER: Glow(Color=000000, Strength=3); WIDTH: 100%; HEIGHT: 100%"> <FONT color=#FFFF00 size=4>光暈文字</font> </div>
執行結果	光暈文字

發光文字
語法	<div style="FILTER: Glow(Color=000000, Strength=5); WIDTH: 100%; HEIGHT: 100%"> <FONT color=#FFFF00 size=4>發光文字</font> </div>
執行結果	發光文字

漸層底色文字
語法	<font style=width:100%; filter:glow(color=#336600,strength=50)> <center> <font color="#CCFFFF">漸層底色文字</font> </center>
執行結果	漸層底色文字

流星文字
語法	<font color="#FFFF00" size="5" face="標楷體" style=background:url(http://easylearn.bhes.tpc.edu.tw/item/advance/image/pic_star2.gif)>流星文字</font>
執行結果	流星文字
備註	若不欲直接指定圖片網址, 請下載下方的星星底圖至你的網站指定位置, 再將上述 background:url 改成該處
備註

星星文字
語法	<font color="#990000" size="6" face="標楷體" style = background:url(http://easylearn.bhes.tpc.edu.tw/item/advance/image/pic_star.gif)>星星文字</font>
執行結果	星星文字
備註	若不欲直接指定圖片網址, 請下載下方的星星底圖至你的網站指定位置, 再將上述 background:url 改成該處
備註

上下標文字
語法	正常字 <sup>上標字</sup><sub>下標字</sub>
執行結果	正常字 ^上標字_下標字