╬═→HTML代码边框实用技能全攻略←═╬

2012-06-25 08:01:01|  分类： 音画代码|字号

精彩日记需要图文并茂

日记信纸唯有黄钻独享

普通用户不必望洋兴叹

代码边框帮你了却心愿

边框色彩任你更换

底面背景由你挑选

--梅思雪

背景颜色淡化日记边框代码

（自左至右淡化代码）

代码

<DIV align=center>

<TABLE border=15 cellSpacing=5 borderColor=#800000 cellPadding=5  bgColor=#0072e3 >

<TBODY>

<TR>

<TD style="FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#00ff00', endColorStr='#ffffff',

gradientType='1')">

<P align=center>这里可放内容这里可放内容这里可放内容</P>

<P align=center>这里可放内容这里可放内容这里可放内容</P>

<P align=center>这里可放内容这里可放内容这里可放内容</P>

</TD></TR></TBODY></TABLE><DIV>

代码说明

border  表格边框

color   颜色

bgcolor 背景颜色

startColorStr  代表左边或上边

endColorStr   代表右边或下边

gradientType='1'  代表从左至右的变化或从右至左的变化

gradientType='0'   代表从上至下的变化或从下至上的变化

效果展示

这里可放内容

（自上至下淡化代码）

代码

<DIV align=center>

<TABLE border=15 cellSpacing=5 borderColor=#800000 cellPadding=5  bgColor=#0072e3 >

<TBODY>

<TR>

<TD style="FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#00ff00', endColorStr='#ffffff',

gradientType='0')">

<P align=center>这里可放内容这里可放内容这里可放内容</P>

<P align=center>这里可放内容这里可放内容这里可放内容</P>

<P align=center>这里可放内容这里可放内容这里可放内容</P>

</TD></TR></TBODY></TABLE></DIV>

代码说明

border  表格边框

color   颜色

bgcolor 背景颜色

startColorStr  代表左边或上边

endColorStr   代表右边或下边

gradientType='1'  代表从左至右的变化或从右至左的变化

gradientType='0'   代表从上至下的变化或从下至上的变化

效果展示

这里可放内容

虚线边框加背景颜色代码

<TABLE style="BORDER-BOTTOM: #ff9900 8px dashed; BORDER-LEFT: #ff9900 8px dashed; BORDER-COLLAPSE: collapse; BORDER-TOP: #ff9900 8px dashed; BORDER-RIGHT: #ff9900 8px dashed" border=1 borderColor=#9900 cellPadding=1  bgColor=#8F4586 align=center >

<TBODY>

<TR>

<TD>

<DIV align=center>

<FONT color=#ff0000>虚线边框表格虚线边框表格虚线边框表格</FONT>

<FONT color=#ff0000>虚线边框表格虚线边框表格虚线边框表格</FONT>

<FONT color=#ff0000>虚线边框表格虚线边框表格虚线边框表格</FONT>

</DIV></TD></TR></TBODY></TABLE>

效果展示

虚线边框表格

点虚线边框代码

<TABLE style="BORDER-BOTTOM: #ff9900 8px dotted; BORDER-LEFT: #ff9900 8px dotted; BORDER-COLLAPSE: collapse; BORDER-TOP: #ff9900 8px dotted; BORDER-RIGHT: #ff9900 8px dotted" border=0 borderColor=#9900 cellPadding=1  align=center >

<TBODY>

<TR>

<TD>

<DIV align=center><FONT color=#ff0000>虚线边框表格虚线边框表格虚线边框表格</FONT>

<DIV align=center><FONT color=#ff0000>虚线边框表格虚线边框表格虚线边框表格</FONT>

<DIV align=center><FONT color=#ff0000>虚线边框表格虚线边框表格虚线边框表格</FONT>

</DIV></TD></TR></TBODY></TABLE>

效果展示

虚线边框表格

双点虚线边框代码

<TABLE style="BORDER-BOTTOM: #ff9900 8px dotted; BORDER-LEFT: #ff9900 8px dotted; BORDER-COLLAPSE: collapse; BORDER-TOP: #ff9900 8px dotted; BORDER-RIGHT: #ff9900 8px dotted" border=0 borderColor=#9900 cellPadding=1  align=center >

<TBODY>

<TR>

<TD>

<TABLE style="BORDER-BOTTOM: #ff9900 8px dotted; BORDER-LEFT: #ff9900 8px dotted; BORDER-COLLAPSE: collapse; BORDER-TOP: #ff9900 8px dotted; BORDER-RIGHT: #ff9900 8px dotted" border=0 borderColor=#9900 cellPadding=1  align=center >

<TBODY>

<TR>

<TD>

<DIV align=center><FONT color=#ff0000>双虚线边框表格双虚线边框表格双虚线边框表格</FONT>

<DIV align=center><FONT color=#ff0000>双虚线边框表双虚线边框表格双虚线边框表格</FONT>

</DIV></TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

效果展示

虚线边框表格

虚线边框表格

单线边框加背景颜色代码

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#fff00 cellPadding=5 bgColor=#E6CAFF align=center border=8>

<TBODY>

<TR>

<TD>

<DIV align=center><FONT color=#ffe4ca>单线边框表格单线边框表格单线边框表格</FONT>

<DIV align=center><FONT color=#ffe4ca>单线边框表格单线边框表格单线边框表格</FONT>

<DIV align=center><FONT color=#ffe4ca>单线边框表格单线边框表格单线边框表格</FONT>

</DIV></TD></TR></TBODY></TABLE>

效果展示

单线边框表格

双线边框代码

<TABLE style="BORDER-BOTTOM: #ff9900 15pt double; BORDER-LEFT: #ff9900 15pt double; BORDER-TOP: #ff9900 15pt double; BORDER-RIGHT: #ff9900 15pt double" bgColor=#ff0000 align=center>

<TBODY>

<TR>

<TD>

<DIV align=center><FONT color=#ffe4ca>双线边框表格双线边框表格双线边框表格</FONT>

<DIV align=center><FONT color=#ffe4ca>双线边框表格双线边框表格双线边框表格</FONT>

<DIV align=center><FONT color=#ffe4ca>双线边框表格双线边框表格双线边框表格</FONT>

</DIV></TD></TR></TBODY></TABLE>

双线边框表格

双线三层边框代码

<TABLE style="BORDER-RIGHT: #9900ff 5px double; BORDER-TOP: #9900ff 5px double; BORDER-LEFT: #9900ff 5px double; BORDER-BOTTOM: #9900ff 5px double" cellSpacing=0 cellPadding=0 align=center border=0>

<TBODY>

<TR>

<TD>

<TABLE style="BORDER-RIGHT: #FF6600 10px double; BORDER-TOP: #FF6600 10px double; BORDER-LEFT: #FF6600 10px double; BORDER-BOTTOM: #FF6600 10px double" cellSpacing=0 cellPadding=0 align=center border=0>

<TBODY>

<TR>

<TD>

<TABLE style="BORDER-RIGHT: #9900ff 5px double; BORDER-TOP: #9900ff 5px double; BORDER-LEFT: #9900ff 5px double; BORDER-BOTTOM: #9900ff 5px double" cellSpacing=0 cellPadding=0 align=center border=0>

<TBODY>

<TR>

<TD>

<DIV align=center><FONT color=#ffe4ca>双线三层边框表格</FONT></DIV>

<DIV align=center><FONT color=#ffe4ca>双线三层边框表格</FONT></DIV>

<DIV align=center><FONT color=#ffe4ca>双线三层边框表格</FONT></DIV>

<DIV align=center><FONT color=#ffe4ca>双线三层边框表格</FONT></DIV>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

效果展示

双线三层边框表格

双线三层边框表格

双线三层边框表格

双线三层边框表格

单棱立体表格代码

<TABLE style="WIDTH: 400px; HEIGHT: 200px" height=40 cellSpacing=0 borderColorDark=#634d7b cellPadding=1 align=center borderColorLight=#bda6d6 border=9 bgColor=#ff0000 >

<TBODY>

<TR>

<TD>

<DIV align=center><FONT color=#ffe4ca>单棱立体表格单棱立体表格单棱立体表格</FONT>

<DIV align=center><FONT color=#ffe4ca>单棱立体表格单棱立体表格单棱立体表格</FONT>

<DIV align=center><FONT color=#ffe4ca>单棱立体表格单棱立体表格单棱立体表格</FONT>

</DIV></TD></TR></TBODY></TABLE>

效果展示

单棱立体表格

槽线立体表格代码-边框凤格属性groove

<TABLE style="BORDER-RIGHT: #00f901 20px groove; BORDER-TOP: #00f901 20px groove; BORDER-LEFT: #00f901 20px groove; BORDER-BOTTOM: #00f901 20px groove; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=200 cellPadding=1 width=400 align=center border=10 bgColor=#6f8a91 >

<TBODY>

<TR>

<TD>

<DIV align=center><FONT color=#ffe4ca>槽线立体表格槽线立体表格槽线立体表格</FONT>

<DIV align=center><FONT color=#ffe4ca>槽线立体表格槽线立体表格槽线立体表格</FONT>

<DIV align=center><FONT color=#ffe4ca>槽线立体表格槽线立体表格槽线立体表格</FONT>

</DIV></TD></TR></TBODY></TABLE>

效果展示

槽线立体表格

脊线立体表格代码-边框凤格属性ridge

<TABLE style="BORDER-RIGHT: #00f901 20px ridge; BORDER-TOP: #00f901 20px ridge; BORDER-LEFT: #00f901 20px ridge; BORDER-BOTTOM: #00f901 20px ridge; BORDER-COLLAPSE: collapse" borderColor=#00f901 bgColor=#ff00ff  cellPadding=1 align=center border=10>

<TBODY>

<TR>

<TD>

<DIV align=center><FONT color=#ffe4ca>脊线立体表格脊线立体表格脊线立体表格</FONT>

<DIV align=center><FONT color=#ffe4ca>脊线立体表格脊线立体表格脊线立体表格</FONT>

<DIV align=center><FONT color=#ffe4ca>脊线立体表格脊线立体表格脊线立体表格</FONT>

</DIV></TD></TR></TBODY></TABLE>

效果展示

脊线立体表格

内凹(内嵌)立体边框代码-边框风格属性inset

<TABLE style="BORDER-RIGHT: #00f901 20px inset; BORDER-TOP: #00f901 20px inset; BORDER-LEFT: #00f901 20px inset; BORDER-BOTTOM: #00f901 20px inset; BORDER-COLLAPSE: collapse" borderColor=#00f901 bgcolor=#7e3d76  cellPadding=1  align=center border=10>

<TBODY>

<TR>

<TD>

<DIV align=center><FONT color=#ffe4ca>内凹立体边框内凹立体边框内凹立体边框</FONT>

<DIV align=center><FONT color=#ffe4ca>内凹立体边框内凹立体边框内凹立体边框</FONT>

<DIV align=center><FONT color=#ffe4ca>内凹立体边框内凹立体边框内凹立体边框</FONT>

</DIV></TD></TR></TBODY></TABLE>

效果展示

内凹立体边框

外凸立体边框加背景颜色淡化代码-边框凤格属性outset

<TABLE style="BORDER-RIGHT: #800000 20px outset; BORDER-TOP: #8f4586 20px outset; BORDER-LEFT: #800000 20px outset; BORDER-BOTTOM: #6f8a91 20px outset; BORDER-COLLAPSE: collapse" borderColor=#00f901 bgcolor=6f8a91 cellPadding=1 align=center border=10>

<TBODY>

<TR>

<TD style="FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ff0000', endColorStr='#ffffff',

gradientType='1')">

<DIV align=center><FONT color=#ffe4ca>外凸立体边框外凸立体边框外凸立体边框</FONT>

<DIV align=center><FONT color=#ffe4ca>外凸立体边框外凸立体边框外凸立体边框</FONT>

<DIV align=center><FONT color=#ffe4ca>外凸立体边框外凸立体边框外凸立体边框</FONT>

</DIV></TD></TR></TBODY></TABLE>

效果展示

外凸立体边框

凸凹立体表格代码

<DIV align=center>

<DIV style="BORDER-RIGHT: 8px outset; BORDER-TOP: 8px outset; BORDER-LEFT: 8px outset; BORDER-BOTTOM: 8px outset; BACKGROUND-COLOR: #e6e6fa">

<P align=center><FONT color=#000>凸凹立体表格凸凹立体表格凸凹立体表格</FONT></P>

<P align=center><FONT color=#000>凸凹立体表格凸凹立体表格凸凹立体表格</FONT></P>

<P align=center><FONT color=#000>凸凹立体表格凸凹立体表格凸凹立体表格</FONT></P>

</DIV></CENTER>

效果展示

凸凹立体表格

颜色背景、固定宽度的凸感边框代码

<DIV align=center>

<TABLE style="BORDER-BOTTOM: #66cdaa 15px ridge; BORDER-LEFT: #66cdaa 15px ridge; BACKGROUND-COLOR: #660000; BORDER-TOP: #66cdaa 15px ridge; BORDER-RIGHT: #66cdaa 15px ridge" cellSpacing=1 align=center>

<TBODY>

<TR>

<TD>

<TABLE border=5 cellSpacing=1 width=400>

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD>

<TABLE border=5 cellSpacing=1 width=400>

<TBODY>

<TR>

<TD>

<P align=center><FONT color=#ffc000>日志内容</FONT></P>

<P align=center><FONT color=#ffc000>日志内容</FONT></P>

<P align=center><FONT color=#ffc000>日志内容</FONT></P>

<P align=center><FONT color=#ffc000>日志内容</FONT></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>

说明

更换代码中所有width=400的数值，可改变边框的宽度

效果展示

日志内容

日志内容

日志内容

日志内容

图片背景、固定宽度的凸感边框代码

<DIV align=center>

<TABLE style="BACKGROUND-IMAGE: url(http://b93.photo.store.qq.com/psb?/V13wGOD90mKj9l/xYSXd7gpjFsMkQYYMLUtyNHNCaQGdn0.R02JIXY73ls!/b/YUfYdzfmLAAAYo4MhDcqLQAA); BORDER-BOTTOM: #66cdaa 15px ridge; BORDER-LEFT: #66cdaa 15px ridge; BORDER-TOP: #66cdaa 15px ridge; BORDER-RIGHT: #66cdaa 15px ridge" cellSpacing=1 align=center>

<TBODY>

<TR>

<TD>

<TABLE border=5 cellSpacing=0 width=400>

<TBODY>

<TR>

<TD>

<P align=center><FONT color=#ff0000>日记内容日记内容日记内容日记内容日记内容日记内容</FONT></P>

<P align=center><FONT color=#ff0000>日志内容日记内容日记内容日记内容日记内容日记内容</FONT></P>

<P align=center><FONT color=#ff0000>日记内容日记内容日记内容日记内容日记内容日记内容</FONT></P>

<P align=center><FONT color=#ff0000>日记内容日记内容日记内容日记内容日记内容日记内容</FONT></P>

<P align=center><FONT color=#ff0000>日记内容日记内容日记内容日记内容日记内容日记内容</FONT></P>

<P align=center><FONT color=#ff0000>日志内容日记内容日记内容日记内容日记内容日记内容</FONT></P>

<P align=center><FONT color=#ff0000>日记内容日记内容日记内容日记内容日记内容日记内容</FONT></P>

<P align=center><FONT color=#ff0000>日记内容日记内容日记内容日记内容日记内容日记内容</FONT></P>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE></DIV>

效果展示

日记内容日记内容日记内容日记内容日记内容日记内容

日志内容日记内容日记内容日记内容日记内容日记内容

日记内容日记内容日记内容日记内容日记内容日记内容

日记内容日记内容日记内容日记内容日记内容日记内容

日记内容日记内容日记内容日记内容日记内容日记内容

日志内容日记内容日记内容日记内容日记内容日记内容

日记内容日记内容日记内容日记内容日记内容日记内容

日记内容日记内容日记内容日记内容日记内容日记内容

透明背景、最大化宽度的凸感边框代码

<DIV align=center>

<TABLE style="BORDER-BOTTOM: #66cdaa 15px ridge; BORDER-LEFT: #66cdaa 15px ridge; WIDTH: 100%; BORDER-TOP: #66cdaa 15px ridge; BORDER-RIGHT: #66cdaa 15px ridge" cellSpacing=1 align=center>

<TBODY>

<TR>

<TD>

<DIV align=center>

<TABLE border=2 cellSpacing=1 width="100%" align=center <TBODY>

<TBODY>

<TR>

<TD>

<P align=center>日志内容</P>

<P align=center>日志内容</P>

<P align=center>日志内容</P>

<P align=center>日志内容</P>

</TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV>

效果展示

日志内容

日志内容

日志内容

日志内容

透明背景、弹性化宽度的凸感边框代码

<TABLE style="BORDER-BOTTOM: #66cdaa 15px ridge; BORDER-LEFT: #66cdaa 15px ridge; BORDER-TOP: #66cdaa 15px ridge; BORDER-RIGHT: #66cdaa 15px ridge" cellSpacing=1 align=center>

<TBODY>

<TR>

<TD>

<TABLE border=1>

<TBODY>

<TR>

<TD>

<TABLE border=1>

<TBODY>

<TR>

<TD>

<TABLE border=1>

<TBODY>

<TR>

<TD>

<P align=center>日志内容日志内容日志内容日志内容日志内容</P>

<P align=center>日志内容日志内容日志内容日志内容日志内容</P>

<P align=center>日志内容日志内容日志内容日志内容日志内容</P>

<P align=center>日志内容日志内容日志内容日志内容日志内容</P>

<P align=center>日志内容日志内容日志内容日志内容日志内容</P>

<P align=center>日志内容日志内容日志内容日志内容日志内容</P>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

效果展示

多层虚线边框加背景颜色代码

<TABLE style="BORDER-RIGHT: #9900ff 8px dashed; BORDER-TOP: #9900ff 8px dashed; BACKGROUND-COLOR: #7e3d76;BORDER-LEFT: #9900ff 8px dashed; BORDER-BOTTOM: #9900ff 8px dashed " cellSpacing=0 cellPadding=0 align=center border=0>

<TBODY>

<TR>

<TD>

<TABLE style="BORDER-RIGHT: #FF6600 8px dashed; BORDER-TOP: #FF6600 8px dashed; BORDER-LEFT: #FF6600 8px dashed; BORDER-BOTTOM: #FF6600 8px dashed" cellSpacing=0 cellPadding=0 align=center border=0>

<TBODY>

<TR>

<TD>

<TABLE style="BORDER-RIGHT: #9900ff 8px dashed; BORDER-TOP: #9900ff 8px dashed; BORDER-LEFT: #9900ff 8px dashed; BORDER-BOTTOM: #9900ff 8px dashed" cellSpacing=0 cellPadding=0 align=center border=0>

<TBODY>

<TR>

<TD>

<P align=center><FONT color=#ff0000>日记内容日记内容日记内容日记内容日记内容日记内容</FONT></P>

<P align=center><FONT color=#ff0000>日志内容日记内容日记内容日记内容日记内容日记内容</FONT></P>

<P align=center><FONT color=#ff0000>日记内容日记内容日记内容日记内容日记内容日记内容</FONT></P>

<P align=center><FONT color=#ff0000>日记内容日记内容日记内容日记内容日记内容日记内容</FONT></P>

<P align=center><FONT color=#ff0000>日记内容日记内容日记内容日记内容日记内容日记内容</FONT></P>

<P align=center><FONT color=#ff0000>日志内容日记内容日记内容日记内容日记内容日记内容</FONT></P>

<P align=center><FONT color=#ff0000>日记内容日记内容日记内容日记内容日记内容日记内容</FONT></P>

<P align=center><FONT color=#ff0000>日记内容日记内容日记内容日记内容日记内容日记内容</FONT></P>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

效果展示

日记内容日记内容日记内容日记内容日记内容日记内容

日志内容日记内容日记内容日记内容日记内容日记内容

日记内容日记内容日记内容日记内容日记内容日记内容

日记内容日记内容日记内容日记内容日记内容日记内容

日记内容日记内容日记内容日记内容日记内容日记内容

日志内容日记内容日记内容日记内容日记内容日记内容

日记内容日记内容日记内容日记内容日记内容日记内容

日记内容日记内容日记内容日记内容日记内容日记内容

双线短虚线混用加图片地址效果代码

<TABLE style="BORDER-RIGHT: #9900ff 10px double; BORDER-TOP: #9900ff 10px double; BORDER-LEFT: #9900ff 10px double; BORDER-BOTTOM: #9900ff 10px double" cellSpacing=0 cellPadding=0  align=center border=0>

<TBODY>

<TR>

<TD>

<TABLE style="BORDER-RIGHT: #FF6600 10px dashed; BORDER-TOP: #FF6600 10px dashed; BORDER-LEFT: #FF6600 10px dashed; BORDER-BOTTOM: #FF6600 10px dashed" cellSpacing=0  cellPadding=0 align=center border=0>

<TBODY>

<TR>

<TD>

<TABLE style="BACKGROUND-IMAGE: url(http://b93.photo.store.qq.com/psb?/V13wGOD90mKj9l/xYSXd7gpjFsMkQYYMLUtyNHNCaQGdn0.R02JIXY73ls!/b/YUfYdzfmLAAAYo4MhDcqLQAA);BORDER-RIGHT: #9900ff 10px double; BORDER-TOP: #9900ff 10px double; BORDER-LEFT: #9900ff 10px double; BORDER-BOTTOM: #9900ff 10px double" cellSpacing=0 cellPadding=0  align=center border=0>

<TBODY>

<TR>

<TD>

<P align=center><FONT color=#ff0000>日记内容日记内容日记内容日记内容日记内容日记内容</FONT></P>

<P align=center><FONT color=#ff0000>日志内容日记内容日记内容日记内容日记内容日记内容</FONT></P>

<P align=center><FONT color=#ff0000>日记内容日记内容日记内容日记内容日记内容日记内容</FONT></P>

<P align=center><FONT color=#ff0000>日记内容日记内容日记内容日记内容日记内容日记内容</FONT></P>

<P align=center><FONT color=#ff0000>日记内容日记内容日记内容日记内容日记内容日记内容</FONT></P>

<P align=center><FONT color=#ff0000>日志内容日记内容日记内容日记内容日记内容日记内容</FONT></P>

<P align=center><FONT color=#ff0000>日记内容日记内容日记内容日记内容日记内容日记内容</FONT></P>

<P align=center><FONT color=#ff0000>日记内容日记内容日记内容日记内容日记内容日记内容</FONT></P>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

效果展示

日记内容日记内容日记内容日记内容日记内容日记内容

日志内容日记内容日记内容日记内容日记内容日记内容

日记内容日记内容日记内容日记内容日记内容日记内容

日记内容日记内容日记内容日记内容日记内容日记内容

日记内容日记内容日记内容日记内容日记内容日记内容

日志内容日记内容日记内容日记内容日记内容日记内容

日记内容日记内容日记内容日记内容日记内容日记内容

日记内容日记内容日记内容日记内容日记内容日记内容

双线短虚线混用加透明背景效果代码

<DIV align=center>

<TABLE style="BORDER-BOTTOM: #9900ff 10px double; BORDER-LEFT: #9900ff 10px double; BORDER-TOP: #9900ff 10px double; BORDER-RIGHT: #9900ff 10px double" border=0 cellSpacing=0 cellPadding=0  align=center >

<TBODY>

<TR>

<TD>

<TABLE style="BORDER-BOTTOM: #ff6600 8px dashed; BORDER-LEFT: #ff6600 8px dashed; BORDER-TOP: #ff6600 8px dashed; BORDER-RIGHT: #ff6600 8px dashed" border=0 cellSpacing=0 cellPadding=0  align=center >

<TBODY>

<TR>

<TD>

<TABLE style="BORDER-BOTTOM: #9900ff 10px double; BORDER-LEFT: #9900ff 10px double; BORDER-TOP: #9900ff 10px double; BORDER-RIGHT: #9900ff 10px double" border=0 cellSpacing=0 cellPadding=0  align=center >

<TBODY>

<TR>

<TD>

<P align=center><FONT color=#c0504d size=5 face=华文新魏><STRONG>

<TABLE style="BORDER-BOTTOM: #9900ff 10px double; BORDER-LEFT: #9900ff 10px double; BORDER-TOP: #9900ff 10px double; BORDER-RIGHT: #9900ff 10px double" border=0 cellSpacing=0 cellPadding=0  align=center >

<TBODY>

<TR>

<TD>

<P align=center><FONT color=#c00000 size=6 face=华文新魏><STRONG>日志内容日志内容日志内容</STRONG></FONT></P>

<P align=center><FONT color=#c00000 size=6 face=华文新魏><STRONG>日志内容日志内容日志内容</STRONG></FONT></P>

<P align=center><FONT color=#c00000 size=6 face=华文新魏><STRONG>日志内容日志内容日志内容</STRONG></FONT></P>

<P align=center><FONT color=#c00000 size=6 face=华文新魏><STRONG>日志内容日志内容日志内容</STRONG></FONT></P></TD></TR></TBODY></TABLE></STRONG></FONT></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>

效果展示

日志内容日志内容

日志内容日志内容

日志内容日志内容

双线短虚线混用加颜色背景效果代码

<TABLE style="BORDER-BOTTOM: #9900ff 10px double; BORDER-LEFT: #9900ff 10px double; BORDER-TOP: #9900ff 10px double; BORDER-RIGHT: #9900ff 10px double" border=0 cellSpacing=0 cellPadding=0 align=center>

<TBODY>

<TR>

<TD>

<TABLE style="BORDER-BOTTOM: #ff6600 8px dashed; BORDER-LEFT: #ff6600 8px dashed; BORDER-TOP: #ff6600 8px dashed; BORDER-RIGHT: #ff6600 8px dashed" border=0 cellSpacing=0 cellPadding=0 align=center>

<TBODY>

<TR>

<TD>

<TABLE style="BORDER-BOTTOM: #9900ff 10px double; BORDER-LEFT: #9900ff 10px double; BORDER-TOP: #9900ff 10px double; BORDER-RIGHT: #9900ff 10px double" border=0 cellSpacing=0 cellPadding=0 bgColor=#616130 align=center>

<TBODY>

<TR>

<TD>

<P align=center><STRONG><FONT color=#ff0000 size=6 face=华文行楷>日记内容日记内容</FONT></STRONG></P>

<P align=center><STRONG><FONT color=#ff0000 size=6 face=华文行楷>日记内容日记内容</FONT></STRONG></P>

<P align=center><STRONG><FONT color=#ff0000 size=6 face=华文行楷>日记内容日记内容</FONT></STRONG></P>

</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

效果展示

=

日记内容日记内容

日记内容日记内容

日记内容日记内容

双线点虚线混用效果代码

<TABLE style="BORDER-RIGHT: #9900ff 15px double; BORDER-TOP: #6f8a91 15px double; BORDER-LEFT: #9900ff 15px double; BORDER-BOTTOM: #6f8a91 15px double" cellSpacing=0 cellPadding=0 align=center  border=0>

<TBODY>

<TR>

<TD>

<TABLE style="BORDER-RIGHT: #FF6600 10px dotted; BORDER-TOP: #6f8a91 10px dotted; BORDER-LEFT: #FF6600 10px dotted; BORDER-BOTTOM: #6f8a91 10px dotted" cellSpacing=0 cellPadding=0 align=center  border=0>

<TBODY>

<TR>

<TD>

<TABLE style="BORDER-RIGHT: #9900ff 10px double; BORDER-TOP: #6f8a91 10px double; BORDER-LEFT: #9900ff 10px double; BORDER-BOTTOM: #6f8a91 10px double" cellSpacing=0 cellPadding=0  align=center  border=0>

<TBODY>

<TR>

<TD>

<P align=center><FONT color=#ffc000>日志内容日志内容日志内容日志内容日志内容</FONT></P>

<P align=center><FONT color=#ffc000>日志内容日志内容日志内容日志内容日志内容</FONT></P>

<P align=center><FONT color=#ffc000>日志内容日志内容日志内容日志内容日志内容</FONT></P>

<P align=center><FONT color=#ffc000>日志内容日志内容日志内容日志内容日志内容</FONT></P>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

效果展示

日志内容日志内容日志内容日志内容日志内容

日志内容日志内容日志内容日志内容日志内容

日志内容日志内容日志内容日志内容日志内容

日志内容日志内容日志内容日志内容日志内容

多层3D 沟槽状边框效果 代码

<TABLE style="BORDER-RIGHT: #6666CC 15px groove; BORDER-TOP: #6666CC 15px groove;  ; BORDER-LEFT:#6666CC 15px groove; BORDER-BOTTOM: #6666CC 15px groove" cellSpacing=0 cellPadding=0 align=center bgColor=#8F4586  border=0>

<TBODY>

<TR>

<TD>

<TABLE style="BORDER-RIGHT:#FFFF33 15px groove; BORDER-TOP:#FFFF33 15px groove; BORDER-LEFT: #FFFF33 15px groove; BORDER-BOTTOM:   #FFFF33 15px groove" cellSpacing=0 cellPadding=0  align=center  border=0>

<TBODY>

<TR>

<TD>

<TABLE style="BORDER-RIGHT: #6f8a91 10px groove; BORDER-TOP: #6f8a91 10px groove; ;BORDER-LEFT: #6f8a91 10px groove; BORDER-BOTTOM: #6f8a91 10px groove" cellSpacing=0 cellPadding=1  align=center  border=0>

<TBODY>

<TR>

<TD>

<P align=center><FONT color=#ffc000>日志内容日志内容日志内容</FONT></P>

<P align=center><FONT color=#ffc000>日志内容日志内容日志内容</FONT></P>

<P align=center><FONT color=#ffc000>日志内容日志内容日志内容</FONT></P>

<P align=center><FONT color=#ffc000>日志内容日志内容日志内容</FONT></P>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

效果展示

日志内容日志内容日志内容

日志内容日志内容日志内容

日志内容日志内容日志内容

日志内容日志内容日志内容

多层3D 脊状边框效果 代码

<TABLE style="BORDER-BOTTOM: #6f8a91 8px ridge; BORDER-LEFT: #6f8a91 8px ridge; BORDER-TOP: #6f8a91 8px ridge; BORDER-RIGHT: #6f8a91 8px ridge" border=0 cellSpacing=0 cellPadding=0 align=center>

<TBODY>

<TR>

<TD>

<TABLE style="BORDER-BOTTOM: #6f8a91 15px ridge; BORDER-LEFT: #6f8a91 15px ridge; BORDER-TOP: #6f8a91 15px ridge; BORDER-RIGHT: #6f8a91 15px ridge" border=0 cellSpacing=0 cellPadding=0 align=center>

<TBODY>

<TR>

<TD>

<TABLE style="BORDER-BOTTOM: #6f8a91 8px ridge; BORDER-LEFT: #6f8a91 8px ridge; BORDER-TOP: #6f8a91 8px ridge; BORDER-RIGHT: #6f8a91 8px ridge" border=0 cellSpacing=0 cellPadding=0 bgColor=#3d3d3d height=200 >

<TBODY>

<TR>

<TD>

<P align=center><FONT color=#ffc000>日志内容日志内容日志内容日志内容</FONT></P>

<P align=center><FONT color=#ffc000>日志内容日志内容日志内容日志内容</FONT></P>

<P align=center><FONT color=#ffc000>日志内容日志内容日志内容日志内容</FONT></P>

<P align=center><FONT color=#ffc000>日志内容日志内容日志内容日志内容</FONT></P>

<P align=center><FONT color=#ffc000>日志内容日志内容日志内容日志内容</FONT></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

效果展示

日志内容日志内容日志内容日志内容

日志内容日志内容日志内容日志内容

日志内容日志内容日志内容日志内容

日志内容日志内容日志内容日志内容

日志内容日志内容日志内容日志内容

============================

多层3D内嵌边框效果代码

<TABLE style="BORDER-RIGHT: #00f901 10px inset; BORDER-TOP: #00f901 10px inset; BORDER-LEFT: #00f901 10px inset; BORDER-BOTTOM: #00f901 10px inset" cellSpacing=0 cellPadding=0 align=center border=0>

<TBODY>

<TR>

<TD>

<TABLE style="BORDER-RIGHT: #ff0000 15px inset; BORDER-TOP: #ff0000 15px inset; BORDER-LEFT: #ff0000 15px inset; BORDER-BOTTOM: #ff0000 15px inset" cellSpacing=0 cellPadding=0 align=center border=0>

<TBODY>

<TR>

<TD>

<TABLE style="BORDER-RIGHT: #642100 10px inset; BORDER-TOP: #642100 10px inset; BORDER-LEFT: #642100 10px inset; BORDER-BOTTOM:

#642100 10px inset" cellSpacing=0 cellPadding=0  bgcolor=#6C3365 align=center border=0>

<TBODY>

<TR>

<TD>

<P align=center><FONT color=#ffc000>日志内容日志内容日志内容日志内容</FONT></P>

<P align=center><FONT color=#ffc000>日志内容日志内容日志内容日志内容</FONT></P>

<P align=center><FONT color=#ffc000>日志内容日志内容日志内容日志内容</FONT></P>

<P align=center><FONT color=#ffc000>日志内容日志内容日志内容日志内容</FONT></P>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

效果展示

日志内容日志内容日志内容日志内容

日志内容日志内容日志内容日志内容

日志内容日志内容日志内容日志内容

日志内容日志内容日志内容日志内容

多层3D 外嵌边框效果 代码

<TABLE style="BORDER-BOTTOM: #8600FF 10px outset; BORDER-LEFT: #8600FF 10px outset; BORDER-TOP: #8600FF 10px outset; BORDER-RIGHT: #8600FF 10px outset" border=0 cellSpacing=0 cellPadding=0 align=center>

<TBODY>

<TR>

<TD>

<TABLE style="BORDER-BOTTOM: #6f8a91 15px outset; BORDER-LEFT: #6f8a91 15px outset; BORDER-TOP: #6f8a91 15px outset; BORDER-RIGHT: #6f8a91 15px outset" border=0 cellSpacing=0 cellPadding=0 bgcolor=ff0000 align=center>

<TBODY>

<TR>

<TD>

<P align=center><FONT color=#ffc000>日志内容日志内容日志内容日志内容</FONT></P>

<P align=center><FONT color=#ffc000>日志内容日志内容日志内容日志内容</FONT></P>

<P align=center><FONT color=#ffc000>日志内容日志内容日志内容日志内容</FONT></P>

<P align=center><FONT color=#ffc000>日志内容日志内容日志内容日志内容</FONT></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

效果展示

日志内容日志内容日志内容日志内容

日志内容日志内容日志内容日志内容

日志内容日志内容日志内容日志内容

日志内容日志内容日志内容日志内容

代码速递

总  说 明

1、代码中 BORDER-RIGHT: 表示右边框；BORDER-TOP: 表示上边框；BORDER-LEFT: 表示左边框；BORDER-BOTTOM: 表示下边框。数值15px为边框线的宽度，可调整。 ridge 表示为脊线立体效果边框，也可以调整为：Solid 简单单线边框；Double 简单双线边框；Groove 沟线立体效果边框；Inset 嵌入线立体效果边框；Outset 浮出线立体效果边框。

2、BACKGROUND-COLOR: 表示边框内背景颜色；background=边框内背景图片。

3、width=600为边框的固定宽度，可调整。

4、 BACKGROUND-IMAGE: url(图片地址); 这段代码用来给边框添加背景图片，放在代码起始位置<TABLE style="之后，与后面的代码部分用；号隔开