图片/文字修饰效果与代码

非草 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>

代码转换如下：
<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 上表示出上标或下标，往往是用插入特殊字符来表示上标，通过改变字体大小来写下标。现在有了上标和下标这两个语句，就可以在网页上写出真正的上标和下标了，而且上标和下标所能使用的字符大大拓宽了。尤其是对上标来说，很多特殊字符中没有的文字符号，以前无法实现的，现在都变为可能。请看实例：　　　　特殊字符效果： 25² aTiger™ Haire® 　　　　上标语句效果： 25² aTiger^TM Haire^® 　　　　上标语句： <sup>上标字符</sup> 　　　　改变字体大小效果： H2O A1 谜语答案　　　　下标语句效果： H₂O A₁ 谜语_答案　　　　下标语句： <sub>下标字符</sub> 这样就可以在日志中写入数学公式、化学方程式等： A₁X² ＋ A₂X ＋A₃ ＝0 （三）水平线/分隔线<HR> 以前不少朋友常常通过在日志中插入一长条形图片来实现内容的分隔，而网上也出现了很多收藏各式各样分隔线图片的日志。现在 Live Spaces 允许使用水平线语句<HR>之后，一切变得简单了。虽然水平线可能没有图片那么动感实足、样式丰富，但是也能通过语言控制，变得色彩缤纷，起到分隔内容、装点日志的效果。 1、普通分隔线：<hr>

2、分隔线宽度属性：<hr width=50%> 或者 <hr width=250> （宽度为实际点数或百分比）

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> （颜色可调）

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>