HTML代码精美素材边框

                                                     外边框和内边框

怎样用代码做外边框和内边框       一、做外边框的代码：   <TABLE style="BORDER-RIGHT: #00ff00 10px ridge; BORDER-TOP: #00ff00 10px ridge; BORDER-LEFT: #00ff00 10px ridge; BORDER-BOTTOM: #00ff00 10px ridge; BACKGROUND-COLOR: #ff0000" cellSpacing=0><TBODY><TR><TD>   这里是文字的输入地方，随着文字的增多，边框就逐渐放大。可以放加入背景图片的代码 ，在这里还可以放一个或多个动画代码（做多层透明flash动画）。 </TD></TR></TBODY></TABLE> 说明：红色代码是右边框；绿色代码是上边框；深蓝色代码是左边框；桃红色代码是下边框；天蓝色代码是边框内面背景颜色；**代码cellSpacing=0是**内边框与外边框距离的，“0”表示没有距离，是可以改变的。（这段代码里没有内边框代码）#号后面的00ff00是颜色代码，可以变换，要改变边框颜色就要将四边#号后的代码变为同一个代码，否则，四边的颜色就会不同。颜色代码可以在颜色代码表里找；10PX是表示外边框的宽度，数值可以改变； 看看效果：   这里是文字的输入地方，随着文字的增多，边框就逐渐放大。 可以放加入背景图片的代码 ，在这里还可以放一个或多个动 画代码（做多层透明flash动画）。     二、怎样加进内边框？ 1、代码： <TABLE border=1><TBODY><TR><TD> 2、说明： A、“=”号后的“1”可以变为“2”或“3”，不可改得太大，因为这是**内边框宽度的，太宽了就不好看了； B、做几个内边框，就将这段代码放开头那段代码的<TD>后，（即“文字”前）并复制粘贴几次; 3、以做三个内边框为例：也就是将内边框代码复制粘贴三次放于开头那段代码的<TD>后，（即“文字”前）边框的宽设为“1”，代码变化如下：   <TABLE style="BORDER-RIGHT: #00ff00 10px ridge; BORDER-TOP: #00ff00 10px ridge; BORDER-LEFT: #00ff00 10px ridge; BORDER-BOTTOM: #00ff00 10px ridge; BACKGROUND-COLOR: #ff0000" cellSpacing=0><TBODY><TR><TD><TABLE border=1><TBODY><TR><TD> <TABLE border=1><TBODY><TR><TD><TABLE border=1><TBODY><TR><TD>   这里是文字的输入地方，随着文字的增多，边框就逐渐放大。可以放加入背景图片的代码 ，在这里还可以放一个或多个动画代码（做多层透明flash动画）。 </TD></TR></TBODY></TABLE>     这里是文字的输入地方，随着文字的增多，边框就逐渐放大。 可以放加入背景图片的代码 ，在这里还可以放一个或多个动 画代码（做多层透明flash动画）。       看看将**内边框与外边框距离的代码cellSpacing=0改为等于“5”后的效果：   这里是文字的输入地方，随着文字的增多，边框就逐渐放大。 可以放加入背景图片的代码 ，在这里还可以放一个或多个动 画代码（做多层透明flash动画）。

                                                                                                                     简单边框

立体线条边框的变化       下面是一段可以改变立体线条边框形状、粗细、颜色和框内背景颜色的代码：   Groove;border-width:7pt; border-color: red">   border-style:     说明： 这段代码是在border-style后面使用不同的语法描述来改变边框形状的： 简单线形边框; Solid 简单双线边框; Double 沟线立体效果边框; Groove 脊线立体效果边框; Ridge 嵌入线立体效果边框; Inset 浮出线立体效果边框Outset   边框线条颜色的改变方法： 绿色处可改变边框的颜色,用英语单词表示也可,用#xxxxxx的形式表示也可.(见颜色值表)=》    边框背景颜色的改变方法： 改变边框内背景颜色的方法就是在桃红色代码处改变颜色值。（可能随便填一个6位数的值，要想得到你想要的准确颜色就要参看“颜色值表”）   下面是将边框线条形状、粗细等改变后的效果： 1、简单线形边框： Solid 边框颜色为绿色 border-color: #00ff00 背景颜色为background-color:#ffdead（米**） 不是立体 <div style="BORDER-RIGHT: #00ff00 7pt solid; BORDER-TOP: #00ff00 7pt solid; BORDER-LEFT: #00ff00 7pt solid; BORDER-BOTTOM: #00ff00 7pt solid"><div style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #ffdead">日志文字 </div></div> 2、简单双线边框：Double 边框颜色为border-color: #0000FF   背景颜色为background-color: #44FFFF（天蓝色） 不是立体 <div style="BORDER-RIGHT: #0000ff 7pt double; BORDER-TOP: #0000ff 7pt double; BORDER-LEFT: #0000ff 7pt double; BORDER-BOTTOM: #0000ff 7pt double"><div style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #44ffff">日志文字 </div></div> 3、沟线立体效果边框：Groove 边框颜色为border-color: #ff0000 （红色） 背景颜色为background-color: #0000ff（蓝色） <div style="BORDER-RIGHT: red 13pt groove; BORDER-TOP: red 13pt groove; BORDER-LEFT: red 13pt groove; BORDER-BOTTOM: red 13pt groove"><div style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #0000ff">日志文字 </div></div>   4、脊线立体效果边框：Ridge 边框颜色为border-color: #44ffff（天蓝色） 背景颜色为background-color: #ff0000（红色） <div style="BORDER-RIGHT: #44ffff 18pt ridge; BORDER-TOP: #44ffff 18pt ridge; BORDER-LEFT: #44ffff 18pt ridge; BORDER-BOTTOM: #44ffff 18pt ridge"><div style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #ff0000">日志文字 </div></div>   5、嵌入线立体效果边框：Inset 边框颜色为border-color: #a000ff（紫色） 背景颜色为background-color: #a0ff60（黄绿色） <div style="BORDER-RIGHT: #a000ff 15pt inset; BORDER-TOP: #a000ff 15pt inset; BORDER-LEFT: #a000ff 15pt inset; BORDER-BOTTOM: #a000ff 15pt inset"><div style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #a0ff60">日志文字 </div></div>   6、浮出线立体效果边框：Outset 边框颜色为border-color: #ff00ff（桃红色） 背景颜色为background-color: #ffa0ff（肉红色） <div style="BORDER-RIGHT: #ff00ff 10pt outset; BORDER-TOP: #ff00ff 10pt outset; BORDER-LEFT: #ff00ff 10pt outset; BORDER-BOTTOM: #ff00ff 10pt outset"><div style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #ffa0ff">日志文字 </div></div>   外边框包内边框的代码 <TABLE style="BORDER-RIGHT: #00ff00 10px ridge; BORDER-TOP: #00ff00 10px ridge; BORDER-LEFT: #00ff00 10px ridge; BORDER-BOTTOM: #00ff00 10px ridge; BACKGROUND-COLOR: #ff0000" cellSpacing=0><TBODY><TR><TD><TABLE border=1><TBODY> <TR><TD>     这里是文字的输入地方，随着文字的增多，边框就逐渐放大。可以放加入背景图片的代码 ，在这里还可以放一个或多个动画代码（做多层透明flash动画）。 </TD></TR></TBODY></TABLE> 效果：   这里是文字的输入地方，随着文字的增多，边框就逐渐放大。可以放加入背景图片的代码 ，在这里还可以放一个或多个动画代码（做多层透明flash动画）。

 

 美化帖子

一.为你的帖子添加漂亮的背景 上面我们已经学会了用颜色做简单的边框代码，要给帖子添加一些漂亮的背景图片效果会更漂亮，如下是添加背景图片的代码： <TABLE borderColor=#cccccc cellSpacing=5 cellPadding=5 width="100%" background=背景图片地址 border=1><TBODY><TR><TD> 说明：代码中的数字是可以变动的。可直接在帖子上添加背景，也可在表格里添加背景，你随便设计了... 例如：<TD> 这个是直接在帖子上添加的背景图   这个是在表格框里添加的     也可以在你所添加的背景上再添加背景，做成的边框也很漂亮的哦... 是 不 是 很 漂 亮 哦 ！     记住要选好图片地址，有些QQ空间图片和百度的图片，还有网易，新浪等博客的图片地址，论坛是不支持些别的图片地址..... 二，水晶感觉的边框代码 <TABLE borderColor=#ff9999 height=211 cellSpacing=0 cellPadding=0 width=720 align=center border=1><TBODY><TR><TD style="FILTER: Blur(Add=true, Direction=180, Strength=20)" bgColor=#ff9999 height=27>标题</TD></TR><TR><TD vAlign=top height=184> 这里是输入文字的地方，还可以放图片代码、Flash动画代码和gif动态小图代码。 </TD></TR></TBODY></TABLE> 说明：**的是边框的颜色值，可以改变（见颜色代码表），绿色的是标题背景的颜色值，也可以改变（见颜色代码表），蓝色的“27”是标题栏的宽度值，也是可以改变的。 二、看看效果： 标题     三.给帖子文字添加滚动条 想要多输入文字，还不想占贴子的太大的空间可以添加滚动条标准的滚动条代码如下： <div style="overflow:auto; width:98%; height:100px; line-height:15px; border-width:1px; border-color:#ffccff; border-style:dotted; scrollbar-base-color:#ff66ff; scrollbar-face-color:none; scrollbar-arrow-color:none; scrollbar-track-color:#ffefff; scrollbar-3dlight-color:#ffffff; scrollbar-darkshadow-color:#ffffff; scrollbar-highlight-color:#f5d8f5; scrollbar-shadow-color:#e5c8e5"><br/><div> 这里为文字输入区<br/> 这里为文字输入区<br/> 这里为文字输入区<br/> 这里为文字输入区<br/> 这里为文字输入区<br/><br/><br/></div></div>   同样颜色是可以替换的... 这里是一些滚动条精选&代码    颜色代码也可自己进行尝试更换。 div代码内换行在代码视图中需要的位置打<br>。   1、代码： <center><div style="BORDER-TOP: medium none"><div style="BORDER-TOP: white 2px solid; OVERFLOW: auto; BORDER-LEFT: white 2px solid; WIDTH: 300px; COLOR: rgb(0,0,0); BORDER-BOTTOM: white 2px solid; HEIGHT: 80px">日志内容</div></div></center> 桃夭 桃之夭夭，灼灼其华。 之子于归，宜其室家。 桃之夭夭，有蕡其实。 之子于归，宜其家室。 桃之夭夭，其叶蓁蓁。 之子于归，宜其家人。 2、代码： <center><DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #ffffe0; SCROLLBAR-HIGHLIGHT-COLOR: #ffffe0; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 300px; SCROLLBAR-SHADOW-COLOR: #ccccff; COLOR: #009900; SCROLLBAR-3DLIGHT-COLOR: #ccccff; SCROLLBAR-ARROW-COLOR: #ffffcc; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffcc; HEIGHT: 80px; BACKGROUND-COLOR: #ffffcc" align=center>日志内容</DIV></center> 芣苡 采采芣苡，薄言采之。 采采芣苡，薄言有之。 采采芣苡，薄言掇之。 采采芣苡，薄言捋之。 采采芣苡，薄言袺之。 采采芣苡，薄言擷之。 3、代码： <center><DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #000000; SCROLLBAR-HIGHLIGHT-COLOR: #000000; OVERFLOW: auto; BORDER-LEFT: black 2px solid; WIDTH: 300px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #000000; SCROLLBAR-ARROW-COLOR: #000000; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 80px; BACKGROUND-COLOR: #000000"><FONT color=#ff9900>日志文字</FONT></DIV></center> 关雎 关关雎鸠，在河之洲。 窈窕淑女，君子好逑。 参差荇菜，左右流之。 窈窕淑女，寤寐求之。 求之不得，寤寐思服。 悠哉悠哉，辗转反侧。 参差荇菜，左右采之。 窈窕淑女，琴瑟友之。 参差荇菜，左右芼之。 窈窕淑女，钟鼓乐之。 4、代码： <center><DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #ffa500; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 300px; SCROLLBAR-SHADOW-COLOR: #ffd700; COLOR: #d2691e; SCROLLBAR-3DLIGHT-COLOR: #ff7f50; SCROLLBAR-ARROW-COLOR: #ff0000; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 80px; BACKGROUND-COLOR: #fffacd" align=center>日志文字</DIV></center> 静女 静女其姝，俟我于城隅。 爱而不见，搔首踟蹰。 静女其娈，贻我彤管。 彤管有炜，说怿女美。 自牧归荑，洵美且异。 匪女之为美，美人之贻。 5、代码： <center><DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #006600; SCROLLBAR-HIGHLIGHT-COLOR: #33cc33; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 300px; SCROLLBAR-SHADOW-COLOR: #33cc33; COLOR: #006600; SCROLLBAR-3DLIGHT-COLOR: #33cc33; SCROLLBAR-ARROW-COLOR: #33cc33; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #33cc33; HEIGHT: 80px; BACKGROUND-COLOR: #ccffcc" align=center><FONT color=#009900></FONT>日志文字</DIV></center> 君子偕老 君子偕老，副笄六珈。 委委佗佗，如山如河。 象服是宜。 子之不淑，云如之何？ 玼兮玼兮，其之翟也。 鬒发如云，不屑髢也。 玉之瑱也，象之揥也。 扬且之晳也。 胡然而天也！ 胡然而帝也！ 瑳兮瑳兮，其之展也， 蒙彼绉絺，是绁袢也。 子之清扬，扬且之颜也， 展如之人兮，邦之媛也！ 6、代码： <center><div style="BORDER-RIGHT: #f0b4b4 solid; BORDER-TOP: #f0b4b4 solid; SCROLLBAR-FACE-COLOR: #f0b4b4; SCROLLBAR-HIGHLIGHT-COLOR: #999999; OVERFLOW: scroll; BORDER-LEFT: #f0b4b4 solid; WIDTH: 300px; SCROLLBAR-SHADOW-COLOR: #ffccff; COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #ffffcc; BORDER-BOTTOM: #f0b4b4 solid; SCROLLBAR-DARKSHADOW-COLOR: #f0b4b4; HEIGHT: 80px; BACKGROUND-COLOR: #ffe1f0" align="center"><font color="#9900cc">日志文字</font></div></center> 蒹葭 蒹葭苍苍，白露为霜。 所谓伊人，在水一方， 溯洄从之，道阻且长。 溯游从之，宛在水中央。 蒹葭萋萋，白露未晞。 所谓伊人，在水之湄。 溯洄从之，道阻且跻。 溯游从之，宛在水中坻。 蒹葭采采，白露未已。 所谓伊人，在水之涘。 溯洄从之，道阻且右。 溯游从之，宛在水中沚。 7、代码： <div style="BORDER-RIGHT: #ff9999 2px solid; BORDER-TOP: #ff9999 2px solid; SCROLLBAR-FACE-COLOR: #ffcc99; SCROLLBAR-HIGHLIGHT-COLOR: #ff9966; OVERFLOW: scroll; BORDER-LEFT: #ff9999 2px solid; WIDTH: 300px; SCROLLBAR-SHADOW-COLOR: #ff9966; COLOR: #ffcccc; SCROLLBAR-3DLIGHT-COLOR: #ffcc99; SCROLLBAR-ARROW-COLOR: #ff9966; BORDER-BOTTOM: #ff9999 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffcc99; HEIGHT: 80px; BACKGROUND-COLOR: #ffcc99" align="center"><div align="left"><font color="#009900"></font><font color="#ff3300">日志文字</font></div></div> 采薇 采薇采薇，薇亦作止。曰归曰归，岁亦莫止。 靡室靡家，玁狁之故。不遑启居，玁狁之故。 采薇采薇，薇亦柔止。曰归曰归，心亦忧止。 忧心烈烈，载饥载渴。我戍未定，靡使归聘。 采薇采薇，薇亦刚止。曰归曰归，岁亦阳止。 王事靡盬，不遑启处。忧心孔疚，我行不来！ 彼尔维何？维常之华。彼路斯何？君子之车。 戎车既驾，四牡业业。岂敢定居？一月三捷。 驾彼四牡，四牡骙骙。君子所依，小人所腓。 四牡翼翼，象弭鱼服。岂不日戒？玁狁孔棘！ 昔我往矣，杨柳依依。今我来思，雨雪霏霏。 行道迟迟，载渴载饥。我心伤悲，莫知我哀！

.                                                                                                                           CSS图片修饰效果.

 

----------●楛嗏 基本代码： ---------------------------------------------------------------------- 添加图片：<img src="图片地址"> ----------------------------------- 贴带连接的字：<a href="所要连接的相关地址">写上你想写的字</a> ----------------------------------- 带连接的图片</a> <a target="cont" href="地址"><img src="图片地址" width="100" height="100" border="0"></a> ----------------------------------- 添加音乐：<embed src="音乐地址" width="宽度" height="高度" autostart=false> ----------------------------------- 添加flash: <embed src="flash地址" width="宽度" height="高度"> ----------------------------------- 添加影视文件：<img dynsrc="文件地址" width="宽度" height="高度" start=mouseover> ---------------------------------------------------------------------- .CSS图片修饰效果. ----------------------------------- 1。单线框    ---------------------------------------------------------------------- <IMG style="BORDER-RIGHT: #ff0000 3px solid; BORDER-TOP: #ff0000 3px solid; BORDER-LEFT: #ff0000 3px solid; BORDER-BOTTOM: #ff0000 3px solid" src="图片地址"> ---------------------------------------------------------------------- 2。双线框 ---------------------------------------------------------------------- <IMG style="BORDER-RIGHT: green 5px double; BORDER-TOP: green 5px double; BORDER-LEFT: green 5px double; BORDER-BOTTOM: green 5px double" src="图片地址"> ---------------------------------------------------------------------- 3。凸出框 ---------------------------------------------------------------------- <IMG style="BORDER-RIGHT: #ff88ff 25px outset; BORDER-TOP: #ff88ff 25px outset; BORDER-LEFT: #ff88ff 25px outset; BORDER-BOTTOM: #ff88ff 25px outset" src="图片地址"> ---------------------------------------------------------------------- 4。凹进框 ---------------------------------------------------------------------- <IMG style="BORDER-RIGHT: #ff88ff 25px inset; BORDER-TOP: #ff88ff 25px inset; BORDER-LEFT: #ff88ff 25px inset; BORDER-BOTTOM: #ff88ff 25px inset" src="图片地址"> ----------------------------------------------------------------------  5。邮票框   ---------------------------------------------------------------------- <font face="楷体_GB2312"><font size="4"><font color="#ff0000"><p align="center"><font face="楷体_GB2312"><font size="4"><font color="#ff0000"><strong>5。邮票框 </strong></font></font></font></p><p align="center"><table style="BORDER-RIGHT: #f6ae56 3px dashed; BORDER-TOP: #f6ae56 3px dashed; BORDER-LEFT: #f6ae56 3px dashed; WIDTH: 313px; BORDER-BOTTOM: #f6ae56 3px dashed; HEIGHT: 200px" cellspacing="5" cellpadding="0" bgcolor="#f6ae56"><tbody><tr><td valign="middle" align="center" width="600" bgcolor="#aeffae" height="200"><strong><img src="图片地址址" /></strong></td></tr></tbody></table></p><p align="center"><font face="宋体" color="#000000" size="3"></font></p></font></font></font> ---------------------------------------------------------------------- 6。虚线框 ---------------------------------------------------------------------- <IMG style="BORDER-RIGHT: #ff0000 4px dashed; BORDER-TOP: #ff0000 4px dashed; BORDER-LEFT: #ff0000 4px dashed; BORDER-BOTTOM: #ff0000 4px dashed" src="图片地址"> ---------------------------------------------------------------------- 7。凹槽框 ---------------------------------------------------------------------- <IMG style="BORDER-RIGHT: green 25px groove; BORDER-TOP: green 25px groove; BORDER-LEFT: green 25px groove; BORDER-BOTTOM: green 25px groove" src="图片地址"> ---------------------------------------------------------------------- 8。脊状框 ---------------------------------------------------------------------- <IMG style="BORDER-RIGHT: green 25px ridge; BORDER-TOP: green 25px ridge; BORDER-LEFT: green 25px ridge; BORDER-BOTTOM: green 25px ridge" src="图片地址"> ---------------------------------------------------------------------- 9。立体阴影框   ---------------------------------------------------------------------- <p align="center"><b><font face="楷体_GB2312"><font size="4"><font color="#ff0000">9。立体阴影框 </font></font></font></b></p><p align="center"><table style="FILTER: progidXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15); WIDTH: 300px; HEIGHT: 200px" height="200" cellspacing="3" cellpadding="15" width="300" border="2"><tbody><tr><td valign="middle" align="center" bgcolor="#ffffff"><img src="图片地址" /></td></tr></tbody></table></p> ---------------------------------------------------------------------- 10。横向渐变透明 ---------------------------------------------------------------------- <IMG style="FILTER: alpha(opacity=100,style=1,finishopacity=0)" src="图片地址"> ---------------------------------------------------------------------- 11。圆形渐变透明 ---------------------------------------------------------------------- <IMG style="FILTER: alpha(opacity=100,style=2,finishopacity=0)" src="图片地址"> ---------------------------------------------------------------------- 12。X形渐变透明 ---------------------------------------------------------------------- <IMG style="FILTER: alpha(opacity=100,style=3,finishopacity=0)" src="图片地址"> ---------------------------------------------------------------------- 13。改变某种颜色 ---------------------------------------------------------------------- <IMG style="FILTER: Chroma(Color=#13629f)" src="图片地址"> ---------------------------------------------------------------------- 14。黑白效果 ---------------------------------------------------------------------- <IMG style="FILTER: gray" src="图片地址"> ---------------------------------------------------------------------- 15。X光效果（底片）   ---------------------------------------------------------------------- <IMG style="FILTER: xray" src="图片地址"> ---------------------------------------------------------------------- 16。浮雕效果  XImageTransform.Microsoft.Emboss()" src="http://image17.360doc.com/DownloadImg/2010/11/1914/6926980_5.jpg" /> ---------------------------------------------------------------------- <IMG style="FILTER: progid:DXImageTransform.Microsoft.Emboss()" src="图片地址"> ---------------------------------------------------------------------- 17。上下颠倒 ---------------------------------------------------------------------- <IMG style="FILTER: flipv" src="图片地址" ---------------------------------------------------------------------- 18。左右颠倒 ---------------------------------------------------------------------- <IMG style="FILTER: fliph" src="图片地址"> ---------------------------------------------------------------------- 19。色彩颠倒 ---------------------------------------------------------------------- <IMG style="FILTER: invert" src="图片地址"> ---------------------------------------------------------------------- 20。粒状阴影 ---------------------------------------------------------------------- <IMG style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#cc8888,strength=30)" src="图片地址"> ---------------------------------------------------------------------- 22。模糊效果 ---------------------------------------------------------------------- <IMG style="FILTER: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10)" src="图片地址"> ---------------------------------------------------------------------- 23。水波效果（风吹） ---------------------------------------------------------------------- <IMG style="FILTER: wave(freq=11, strength=4, phase=6, lightstrength=10)" src="图片地址"> ---------------------------------------------------------------------- ----------------------------------- Qzone官方社区 http:// -----------------------------------

 

                                                                                        边框制作（一）

边框制作【一】楛嗏 1.在图片上写日志效果：   图片上写日志代码说明： height=300表示图片的高度为300 width=500 表示图片的宽度为500 图片地址表示图片属性地址 border=3 表示框线厚度为3（当设定为0时只是简单的图片加字效果） cellSpacing=3表示为边框格线设置距离为3（最佳数值1到6） 注意：当数值设定为0时无效 borderColor=#003333表示边框格线颜色，颜色码是“003333” 有关颜色的选取请参照颜色代码表   代 码 如 下 <TABLE borderColor=#003333 height=300 cellSpacing=3 cellPadding=0 width=500 align=center background=图片地址 border=3><TBODY><TR><TD align=middle> <><FONT face=宋体 color=#ff0000 size=4><STRONG>添加文字或图片</STRONG></FONT></P></TD></TR></TBODY></TABLE> 2.用颜色码制作简单日志边框效果：   颜色码制作简单日志边框代码说明： borderColor=#00FF00 表示边框格线颜色码 height=300 表示边框高度数值 cellSpacing=0 表示格线的距离数值 width=500 表示边框宽度数值 bgColor=#FFFFCC 表示边框内背景颜色码 border=6 表示边框格线厚度   代 码 如 下 <TABLE borderColor=#00FF00 height=300 cellSpacing=0 cellPadding=0 width=500 align=center bgColor=#FFFFCC border=6><TBODY><TR><TD align=middle> <><FONT face=宋体 color=#ff0000 size=4><STRONG>添加文字或图片</STRONG></FONT></P></TD></TR></TBODY></TABLE> 3.素材边框加标题栏及背景效果：   素材边框加标题栏及背景代码说明 标题栏背景图片地址 表示标题栏的背景图片属性地址 height=38 表示标题栏的高度 日志背景图片地址表示日志背景图片属性地址 height=250 表示日志背景的高度 标题背景高度还是日志背景高度都无需太大的修改，因为两者的高度都会随文字的大小和数量增加，所以，只设初步就好。这样在日志目录浏览中才不会显得过大。   代 码 如 下 <TABLE height=300 cellSpacing=2 cellPadding=0 width=500 align=center border=2> <TBODY><TR><TD align=middle background=标题栏背景图片地址 height=38><STRONG><FONT color=#ff0000 size=5>添加标题</FONT></STRONG></TD></TR><TR><TD align=middle background=日志背景图片地址 height=250><><FONT color=#ff00ff size=3>添加文字或图片</FONT></P></TD></TR></TBODY></TABLE> 4.颜色框加标题栏及背景色效果：   颜色边框加标题栏及背景色代码说明 borderColor=#00FF00 表示边框格线颜色码 bgColor=#FFFFCC 表示日志背景颜色码 bgColor=#00FF00 表示标题栏颜色码 有关颜色的选取请参照颜色代码表   代 码 如 下 <TABLE borderColor=#00FF00 height=300 cellSpacing=3 cellPadding=0 width=500 align=center bgColor=#FFFFFF border=6><TBODY><TR><TD align=middle bgColor=#00FF00 height=38><FONT face=宋体 color=#FFFFFF size=5><STRONG>添加标题</STRONG></FONT></TD></TR><TR><TD align=middle height=250><FONT face=宋体 color=#222222 size=3><STRONG>添加文字或图片</STRONG></FONT></TD></TR></TBODY></TABLE> 5.多层素材边框效果：   多层素材边框效果代码说明 橙色代码部份表示第一层格线宽度 蓝色代码部份表示第一层背景图片地址 粉色代码部份表示第二层格线宽度 青色代码部份表示第二层背景图片地址 紫色代码部份表示第三层格线宽度 绿色代码部份表示第三层背景图片地址 **代码部份表示日志背景图片地址 <TABLE borderColor=#000000 height=300 cellSpacing=20 cellPadding=0 width=500 align=center background=边框背景图片地址 border=1><TBODY> <TR> <TD align=middle> 表示边框的一层代码，如果要加多层就只需在所有代码前加一段这个代码就行，减少也是删除这一段。   代 码 如 下 <TABLE borderColor=#000000 height=300 cellSpacing=20 cellPadding=0 width=500 align=center background=第一层边框背景图片地址 border=1><TBODY><TR><TD align=middle><TABLE borderColor=#003366 height=300 cellSpacing=16 cellPadding=0 width=500 align=center background=第二层边框背景图片地址 border=1><TBODY><TR> <TD align=middle><TABLE borderColor=#000000 height=300 cellSpacing=8 cellPadding=0 width=500 align=center background=第三层边框背景图片地址 border=1><TBODY><TR> <TD align=middle><TABLE borderColor=#000000 height=300 cellSpacing=3 cellPadding=0 width=500 align=center background=日志背景图片地址 border=3><TBODY><TR><TD align=middle><P><FONT face=宋体 color=#ff0000 size=4><STRONG>添加文字或图片</STRONG></FONT></P></TD></TR></TBODY></TABLE> 6. 添加多层颜色框效果：   添加多层颜色框代码说明： 蓝色代码表示第一层边框颜色代码 绿色代码表示第二层边框颜色代码 青色代码表示第三层边框颜色代码 粉色代码表示日志背景颜色 <TABLE borderColor=#000000 height=300 cellSpacing=20 cellPadding=0 width=500 align=center bgColor=#00FF00 border=1> <TBODY> <TR> <TD align=middle> 表示边框的一层代码，如果要加多层就只需在所有代码前加一段这个代码就行，减少也是删除这一段。   代 码 如 下 <TABLE borderColor=#000000 height=300 cellSpacing=20 cellPadding=0 width=500 align=center bgColor=#00FF00 border=1><TBODY><TR><TD align=middle><TABLE borderColor=#FFFFFF height=300 cellSpacing=12 cellPadding=0 width=500 align=center bgColor=#000000 border=1><TBODY><TR><TD align=middle><TABLE borderColor=#000000 height=300 cellSpacing=8 cellPadding=0 width=500 align=center bgColor=#00FF00 border=1><TBODY><TR><TD align=middle> <TABLE borderColor=#000000 height=300 cellSpacing=2 cellPadding=0 width=500 align=center bgColor=#FFFFFF border=1><TBODY><TR><TD align=middle> <P><FONT face=宋体 color=#ff0000 size=4><STRONG>添加文字或图片</STRONG></FONT></P></TD></TR></TBODY></TABLE>

                                                    特殊符号应用图标与代码

样式 图标代码 样式 图标代码 ★ <font size=5 color=#ff0033>★</font> ☆ <font size=5 color=#ff0033>☆</font> ⊙ <font size=5 color=#ff0033>⊙</font> ● <font size=5 color=#ff0033>●</font> 卐 <font size=5 color=#000000>卐</font> ▓ <font size=5 color=#000000>▓</font> ◆ <font size=5 color=#000000>◆</font> ≈ <font size=5 color=#000000>≈</font> ∴ <font size=5 color=#000000>∴</font> ◎ <font size=5 color=#000000>◎</font> j <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">j</FONT> h <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">h</FONT> a <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">a</FONT> V <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">V</FONT> w <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">w</FONT> ! <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">!</FONT> & <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">&</FONT> " <FONT FACE=" Webdings" SIZE="+<font size=5 color=#000000>?</font> 2" COLOR="#000000">"</FONT> H <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">H</FONT> U <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">U</FONT> J <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">J</FONT> L <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">L</FONT> b <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">b</FONT> e <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">e</FONT> p <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">p</FONT> O <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">O</FONT> % <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">%</FONT> v <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">v</FONT> f <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">f</FONT> N <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">N</FONT> ! <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">!</FONT> " <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">"</FONT> # <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">#</FONT> $ <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">$</FONT> % <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">%</FONT> & <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">&</FONT> ' <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">'</FONT> ( <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">(</FONT> ) <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">)</FONT> * <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">*</FONT> + <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">+</FONT> , <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">,</FONT> - <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">-</FONT> . <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">.</FONT> / <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">/</FONT> 0 <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">0</FONT> 1 <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">1</FONT> 2 <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">2</FONT> 3 <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">3</FONT> 4 <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">4</FONT> 5 <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">5</FONT> 6 <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">6</FONT> 7 <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">7</FONT> 8 <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">8</FONT> 9 <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">9</FONT> : <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">:</FONT> ; <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">;</FONT> < <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000"><</FONT> = <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">=</FONT> > <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">></FONT> <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">?</FONT> @ <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">@</FONT> A <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">A</FONT> B <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">B</FONT> C <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">C</FONT> D <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">D</FONT> E <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">E</FONT> F <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">F</FONT> G <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">G</FONT> H <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">H</FONT> I <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">I</FONT> J <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">J</FONT> K <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">K</FONT> L <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">L</FONT> M <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">M</FONT> N <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">N</FONT> O <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">O</FONT> P <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000"></FONT> Q <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">Q</FONT> R <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">R</FONT> S <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">S</FONT> T <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">T</FONT> U <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">U</FONT> V <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">V</FONT> W <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">W</FONT> X <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">X</FONT> Y <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">Y</FONT> Z <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">Z</FONT> [ <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">[</FONT> ] <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">]</FONT> ^ <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">^</FONT> _ <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">_</FONT> ` <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">`</FONT> a <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">a</FONT> b <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">b</FONT> c <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">c</FONT> d <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">d</FONT> e <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">e</FONT> f <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">f</FONT> g <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">g</FONT> h <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">h</FONT> i <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">i</FONT> j <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">j</FONT> k <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">k</FONT> l <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">l</FONT> m <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">m</FONT> n <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">n</FONT> o <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">o</FONT> p <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">p</FONT> q <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">q</FONT> r <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">r</FONT> s <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">s</FONT> t <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">t</FONT> u <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">u</FONT> v <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">v</FONT> w <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">w</FONT> x <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">x</FONT> y <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">y</FONT> z <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">z</FONT> { <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">{</FONT> | <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">|</FONT> } <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">}</FONT> ~ <FONT FACE=" Wingdings" SIZE="+2" COLOR="#000000">~</FONT> <FONT FACE="symbol" SIZE="+2" color="#000000">?</font> q <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">q</FONT> x <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">x</FONT> r <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">r</FONT> y <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">y</FONT> s <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">s</FONT> z <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">z</FONT> <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">?</FONT> o <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">o</FONT> 3 <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">3</FONT> 4 <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">4</FONT> 5 <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">5</FONT> 6 <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">6</FONT> 7 <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">7</FONT> 8 <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">8</FONT> 9 <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">9</FONT> ~ <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">~</FONT> [ <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">[</FONT> ] <FONT FACE=" Webdings" SIZE="+2" COLOR="#000000">]</FONT> 里面的颜色代码随便你更换，想换什么颜色就换什么颜色.