2012-04-10 13:58:01| 分类：
【边框教程】 |字号
订阅本文引用自鳕鯡鮩鲒
《用颜色代码做边框》用颜色代码做边框
一、做颜色边框的代码
<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>
</TD></TR></TBODY></TABLE>
说明：红色代码是右边框；绿色代码是上边框；深蓝色代码是左边框；桃红色代码是下边框；天蓝色代码是边框内面背景颜色；
紫色代码cellSpacing=0是限制内边框与外边框距离的，“0”表示没有距离，是可以改变的。（这段代码里没有内边框代码）
#号后面的00ff00是颜色代码，可以变换，要改变边框颜色就要将四边#号后的代码变为同一个代码，否则，四边的颜色就会不同，
颜色代码可以在颜色代码表里找，注意用小写；10PX是表示外边框的宽度，数值可以改变。
效果：
此框代码
此框代码
<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>
</TD></TR></TBODY></TABLE>
外框和背景换色
此框代码
此框代码
<TABLE style="BORDER-RIGHT: #ae00ae 10px ridge; BORDER-TOP: #ae00ae 10px ridge; BORDER-LEFT: #ae00ae 10px ridge; BORDER-BOTTOM: #ae00ae 10px ridge; BACKGROUND-COLOR: #844200" cellSpacing=0>
<TBODY>
<TR>
<TD>
<P> </P></TD></TR></TBODY></TABLE>
外框加粗、换色
此框 代码
此框 代码
<TABLE style="BORDER-RIGHT: #9d9d9d 20px ridge; BORDER-TOP: #9d9d9d 20px ridge; BORDER-LEFT: #9d9d9d 20px ridge; BORDER-BOTTOM: #9d9d9d 20px ridge; BACKGROUND-COLOR: #750000" cellSpacing=0>
<TBODY>
<TR>
<TD>
<P> </P></TD></TR></TBODY></TABLE>
二、边框里添加内边框
1、添加白框代码：
<TABLE border=1>
<TBODY>
<TR>
<TD>
说明：
A、“=”号后的“1”可以变为“2”或“3”.......，不可改得太大，因为这是限制内边框宽度的，太宽了就不好看了；
B、做几个内边框，就将这段代码放开头那段代码的<TD>后，（即“文字”前）并复制粘贴几次。
效果、代码
此框代码
（加一个内框代码）
此框代码
（加一个内框代码）
<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=5>
<TBODY>
<TR>
<TD>
<TABLE border=1>
<TBODY>
<TR>
<TD> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TR>
</TBODY></TABLE></TR></TBODY></TABLE>
此框代码
（加3个内框代码）
此框代码
（加3个内框代码）
<TABLE style="BORDER-RIGHT: #7c3d76 10px ridge; BORDER-TOP: #7c3d76 10px ridge;
BORDER-LEFT:
#7c3d76 10px ridge; BORDER-BOTTOM: #7c3d76 10px ridge; BACKGROUND-COLOR: #d3a4ff"
cellSpacing=3>
<TBODY>
<TR>
<TD>
<TABLE border=1>
<TBODY>
<TR>
<TD>
<TABLE border=1>
<TBODY>
<TR>
<TD>
<TABLE border=1>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY>
</TABLE></TD></TR></TBODY></TABLE>
3. 添加其他颜色框代码：
<TABLE border=3>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#ffff99 height=3 cellSpacing=1 cellPadding=1 width=800 align=center bgColor=#000000
border=3>
<TBODY>
<TR>
<TD>
说明：就将这段代码放开头那段代码的<TD>后，更换颜色代码，可得不同颜色内框和背景颜色。
此框代码
此框代码
<P></P><FONT size=2></FONT>
<TABLE style="BORDER-RIGHT: #ff0000 10px ridge; BORDER-TOP: #ff0000 10px ridge; BORDER-LEFT: #ff0000 10px ridge; BORDER-BOTTOM: #ff0000 10px ridge; BACKGROUND-COLOR: #ffcc33" cellSpacing=5 align=center>
<TBODY>
<TR>
<TD>
<TABLE border=3>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#ffff99 height=3 cellSpacing=1 cellPadding=1 width=800 align=center bgColor=#000000 border=3>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
4、添加一条细颜色框代码：
<TABLE borderColor=#00ff00 height=3 cellSpacing=10 cellPadding=10 width=800 align=center bgColor=#000000
border=1>
<TBODY>
<TR>
<TD>
说明：就将这段代码放开头那段代码的<TD>后，更换TABLE borderColor=#00ff00 颜色代码，得到不同颜色细框。
此框代码
此框代码
<TABLE style="BORDER-RIGHT: #00ff00 10px ridge; BORDER-TOP: #00ff00 10px ridge; BORDER-LEFT: #00ff00 10px ridge; BORDER-BOTTOM: #00ff00 10px ridge; BACKGROUND-COLOR: #460046" cellSpacing=8>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#00ff00 height=3 cellSpacing=10 cellPadding=10 width=800 align=center bgColor=#460046 border=1>
<TBODY>
<TR>
<TD><BR><BR><BR><BR>6<BR><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
5、添加细框代码：
<TABLE borderColor=#00ff00 height=3 cellSpacing=10 cellPadding=10 width=800
align=center bgColor=#000000 border=1>
<TBODY>
<TR>
<TD>
说明：就将这段代码放开头那段代码的<TD>后，一次添加粘贴几次，更换颜色代码，
得到几层不同颜色细框。
此框代码
此框代码
<TABLE style="BORDER-RIGHT: #00ff00 10px ridge; BORDER-TOP: #00ff00
10px ridge; BORDER-LEFT: #00ff00 10px ridge; BORDER-BOTTOM: #00ff00
10px ridge; BACKGROUND-COLOR: #000000" cellSpacing=5>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#00ff00 height=3 cellSpacing=10 cellPadding=10
width=800 align=center bgColor=#000000 border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#ff0000 height=3 cellSpacing=10 cellPadding=10
width=800 align=center bgColor=#000000 border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#ffd306 height=3 cellSpacing=10 cellPadding=10
width=800 align=center bgColor=#000000 border=1>
<TBODY>
<TR>
<TD>
<P> </P></TD></TR></TBODY></TABLE></TD></TR></TBODY>
</TABLE><FONT color=#ff00cc></FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY>
</TABLE>
此框代码
此框代码
（加一个内框代码）
代码：
<TABLE style="BORDER-RIGHT: #000099 10px ridge; BORDER-TOP: #000099 10px ridge;
BORDER-LEFT: #000099 10px ridge; BORDER-BOTTOM: #000099 10px ridge; BACKGROUND-COLOR: #080808" cellSpacing=5>
<TBODY>
<TR>
<TD>
<TABLE border=1>
<TBODY>
<TR>
<TD> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TR>
</TBODY></TABLE></TR></TBODY></TABLE>
以上边框代码有的来源于网络，有的为网络代码组合而成，试一试更换颜色代码和代码中数据，
你会有所发现！! !
此框代码
代码：
代码
<TABLE style="BORDER-BOTTOM: rgb(255,220,116) 12px ridge; BORDER-LEFT: rgb(255,220,116) 12px ridge; BORDER-TOP: rgb(255,220,116) 12px ridge; BORDER-RIGHT: rgb(255,220,116) 12px ridge" title=鳕鲱鮩鲒编辑 border=5 cellSpacing=10 borderColor=#ffdc74 cellPadding=12 width=720 bgColor=#000000 align=center>
<TBODY>
<TR>
<TD>
<DIV align=center> </DIV></TD></TR></TBODY>
<P></P>
<P></P></TABLE>
代码：
代码
<TD><FONT color=#339966 size=1 face=宋体><STRONG>
<TABLE style="BORDER-BOTTOM: #336666 12px ridge; BORDER-LEFT: #336666 12px ridge; WIDTH: 826px; HEIGHT: 105px; BORDER-TOP: #336666 12px ridge; BORDER-RIGHT: #336666 12px ridge" title=鳕鲱鮩鲒编辑 border=5 cellSpacing=10 borderColor=#336666 cellPadding=12 width=826 bgColor=#000000 align=center>
<TBODY>
<TBODY>
<TR>
<TD></TD></TR></TBODY><BR></TABLE></STRONG></FONT>
用颜色制作边框
用颜色制作边框
代码代码：
用颜色制作边框代码 <TABLE border=50 cellSpacing=5 borderColor=#00ffdd cellPadding=8 width="100%" bgColor=#aaaadd align=center>
<TBODY>
<TR>
<TD>
<TABLE border=1 cellSpacing=5 borderColor=#aa99bb cellPadding=8 width="100%" bgColor=#000000 align=center>
<TBODY>
<TR>
<TD>
<P dir=ltr><FONT color=#ff6633 size=4><STRONG>此处添加内容</STRONG></FONT></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
立 体 边 框 代 码
立 体 边 框 代 码
<table style="border:19px #ccffcc ridge" align="center" border="0" cellpadding="0" cellspacing="0" width="460" background="http://image51.360doc.com/DownloadImg/2012/04/1021/23085872_6.jpg">
<tr><td><br><br><br><br><br><br></td></tr></table>
黑底边框代码
代码
<TABLE id=blogContentTable cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD vAlign=top><BR><BR>
<P style="TEXT-INDENT: 2em">
<TABLE border=0 cellSpacing=11 borderColor=#cccccc cellPadding=11 width="100%" bgColor=#000000>
<TBODY>
<TR>
<TD>
<TABLE border=5 cellSpacing=3 borderColor=#633414 cellPadding=3 width="100%" bgColor=#000000>
<TBODY>
<TR>
<TD>
<TABLE border=0 cellSpacing=11 borderColor=#cccccc cellPadding=11 width="100%" bgColor=#000000>
<TBODY>
<TR>
<TD>
<TABLE border=1 cellSpacing=0 borderColor=#965d36 cellPadding=0 width="100%" bgColor=#000000>
<TBODY>
<TR>
<TD>
<TABLE border=10 cellSpacing=0 borderColor=#412614 cellPadding=0 width="100%" bgColor=#000000>
<TBODY>
<TR>
<TD>
<TABLE border=1 cellSpacing=0 borderColor=#965d36 cellPadding=0 width="100%" bgColor=#000000>
<TBODY>
<TR>
<TD>
<P style="TEXT-INDENT: 2em"></P><
<P style="TEXT-INDENT: 2em"></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<P style="TEXT-INDENT: 2em"> </P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR>
蓝边框
l蓝色边框代码
代码：
<TABLE id=blogContentTable cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD vAlign=top><BR>
<P style="TEXT-INDENT: 2em">
<TABLE style="WIDTH: 877px; HEIGHT: 427px" border=0 cellSpacing=11 borderColor=#f0ffff cellPadding=11 width=877 bgColor=#000033 align=center>
<TBODY>
<TR>
<TD>
<TABLE border=5 cellSpacing=3 borderColor=#f0ffff cellPadding=3 width="100%" bgColor=#000033>
<TBODY>
