圖片/文字修飾效果與代碼

非草 2010-03-01

展開全文

單線框

雙線框

凸出框

凹進框

郵票框
<center>
<table style="border:3 dashed #f6ae56" cellspacing="5" cellpadding="0" bgcolor="#f6ae56"><tr><td bgcolor="#aeffae" width=600 height=450 align=center valign=middle><img src="圖片地址"></td></tr></table></center>

代碼如下：
<CENTER>
<TABLE style="BORDER-RIGHT: #f6ae56 3px dashed; BORDER-TOP: #f6ae56 3px dashed; BORDER-LEFT: #f6ae56 3px dashed; BORDER-BOTTOM: #f6ae56 3px dashed" cellSpacing=5 cellPadding=0 bgColor=#f6ae56>
<TBODY>
<TR>
<TD vAlign=center align=middle width=600 bgColor=#aeffae height=450>
<P align=left><IMG src="圖片地址"></P></TD></TR></TBODY></TABLE></CENTER>

虛線框
<CENTER><IMG style="BORDER-RIGHT: #ff0000 4px dashed; BORDER-TOP: #ff0000 4px dashed; BORDER-LEFT: #ff0000 4px dashed; BORDER-BOTTOM: #ff0000 4px dashed" src="圖片地址"><BR><BR><BR></CENTER>

凹槽框
<center>
<img src="圖片地址" style="border:25 groove green" border="0"><br><br><br></center>

脊狀框
<center>
<img src="圖片地址" style="border:25 ridge green" border="0"><br><br><br></center>

立體陰影框
<center>
<table width=400 height=400 border=2 cellpadding="15" cellspacing="3" style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)">
<tr><td bgcolor="#ffffff" align=center valign=middle><img src="圖片地址"></td></tr></table></center>

代碼轉(zhuǎn)換如下：
<CENTER>
<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)" height=400 cellSpacing=3 cellPadding=15 width=400 border=2>
<TBODY>
<TR>
<TD vAlign=center align=middle bgColor=#ffffff><IMG src="圖片地址"></TD></TR></TBODY></TABLE></CENTER>

10。陰影框
<center><img src="圖片地址" style="filter:shadow(color=#32cd32)"></center>

橫向漸變透明
<center><img src="圖片地址" style="filter=alpha(opacity=100,style=1,finishopacity=0)">

圓形漸變透明
<center><img src="圖片地址" style="filter=alpha(opacity=100,style=2,finishopacity=0)"></center>

X形漸變透明
<center><img src="圖片地址" style="filter=alpha(opacity=100,style=3,finishopacity=0)"></center>

改變某種顏色
<center><img src="圖片地址"style="FILTER: Chroma(Color=RED)"></center>

黑白效果
<center><img src="圖片地址" style="filter:'gray'"></center>

X光效果（底片）
<center><img src="圖片地址" style="filter:'xray'"></center>

浮雕效果
<center><img src="圖片地址" style="filter:progid:DXImageTransform.Microsoft.Emboss()"></center>

上下顛倒
<center><img src="圖片地址" style="filter:flipv">

左右顛倒
<center><img src="圖片地址" style="filter:fliph"></center>

色彩顛倒
<center><img src="圖片地址" style="filter:invert"></center>

粒狀陰影
<center><img src="圖片地址" style="filter:progid:DXImageTransform.Microsoft.Glow(color=#cc8888,strength=30)"></center>

模糊效果
<center><img src="圖片地址" style="filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=10)"></center>

水波效果（風吹）
<center><img src="圖片地址" style="filter:wave(freq=11, strength=4, phase=6, lightstrength=10)"></center>

Space 簡易教程—— 文字格式與分隔線 （一）基本字體格式 在 Live Spaces 日志編輯工具條上，有三個用于修改日志文字格式的按鈕：B I U，分別代表了“粗體”、“斜體”、“下劃線”不同文字格式。其實用 HTML 語句，也可以作出同樣的效果，甚至可以做出“~~刪除線~~”的效果。請看下面的實例：

正常字符效果：Welcome to aTiger‘s Space!
粗體字符效果：Welcome to aTiger‘s Space!	語句：<STRONG>Welcome to aTiger‘s Space!</STRONG> 或　　　　　<B>Welcome to aTiger‘s Space!</B>
斜體字符效果：Welcome to aTiger‘s Space!	語句：<EM>Welcome to aTiger‘s Space!</EM> 或　　　　　<I>Welcome to aTiger‘s Space!</I>
下劃線效果：Welcome to aTiger‘s Space!	語句：<U>Welcome to aTiger‘s Space!</U>
刪除線效果：~~Welcome to aTiger‘s Space!~~	語句：<STRIKE>Welcome to aTiger‘s Space!</STRIKE>

以上實例全部在 Internet Explorer 6.0 瀏覽器中測試通過，對于不同的瀏覽器顯示效果可能會略有差異。 （二）上標<SUP>和下標<SUB> 以前想在 MSN Space 上表示出上標或下標，往往是用插入特殊字符來表示上標，通過改變字體大小來寫下標。現(xiàn)在有了上標和下標這兩個語句，就可以在網(wǎng)頁上寫出真正的上標和下標了，而且上標和下標所能使用的字符大大拓寬了。尤其是對上標來說，很多特殊字符中沒有的文字符號，以前無法實現(xiàn)的，現(xiàn)在都變?yōu)榭赡?。請看實例?/center> 　　　　特殊字符效果： 25² aTiger™ Haire® 　　　　上標語句效果： 25² aTiger^TM Haire^® 　　　　上標語句： <sup>上標字符</sup> 　　　　改變字體大小效果： H2O A1 謎語答案　　　　下標語句效果： H₂O A₁ 謎語_答案　　　　下標語句： <sub>下標字符</sub> 這樣就可以在日志中寫入數(shù)學公式、化學方程式等： A₁X² ＋ A₂X ＋A₃ ＝0 （三）水平線/分隔線<HR> 以前不少朋友常常通過在日志中插入一長條形圖片來實現(xiàn)內(nèi)容的分隔，而網(wǎng)上也出現(xiàn)了很多收藏各式各樣分隔線圖片的日志?，F(xiàn)在 Live Spaces 允許使用水平線語句<HR>之后，一切變得簡單了。雖然水平線可能沒有圖片那么動感實足、樣式豐富，但是也能通過語言控制，變得色彩繽紛，起到分隔內(nèi)容、裝點日志的效果。 1、普通分隔線：<hr>

2、分隔線寬度屬性：<hr width=50%> 或者 <hr width=250> （寬度為實際點數(shù)或百分比）

3、分隔線位置屬性：<hr align=right width=50%> （位置分為 Left、Center、Right 三種）

4、分隔線厚度屬性：<hr style="height:10px"> （奇怪，height=10 似乎不能起到效果）

5、分隔線無陰影屬性：<hr style="height:10px" noshade>

6、分隔線彩色屬性：<hr color=red> 或者 <hr color=#FF0000> （顏色可調(diào)）

7、漸變顏色的分隔線： <hr style="filter:alpha(opacity=5,finishopacity=100,style=1);height:10px" color=green>

8、中心透明的分隔線： <hr style="filter:alpha(opacity=0,finishopacity=100,style=2);height:12px" color=orange>

9、中心不透明的分隔線： <hr style="filter:alpha(opacity=100,finishopacity=0,style=2);height:15px" color=yellow>

10、波浪線： <hr style="filter:wave(strength=9,freq=2,lightstrength=20,phase=9);height:15px" color=pink width=95%>

11、三色線： <hr style="border-top: #ff0000 solid; color: #00ff00; border-bottom: #0000ff solid; height: 9px">

12、虛線： <hr style="border-top: 2px dashed; border-bottom: 2px dashed; height: 2px" color=black>

13、豎線： <hr style="height:100px; width:4px" color=orange> <hr style="filter:alpha(opacity=100,finishopacity=5,style=2); height:100px; width:5px" color=navy> <hr style="filter:alpha(opacity=0,finishopacity=100,style=2);height:100px; width:4px" color=red>