文字加边框效果

1、单线型边框效果代码:

<TABLE style=”BORDER-BOTTOM: #0000ff 4pt solid; POSITION: relative; BORDER-LEFT: #0000ff 4pt solid; WIDTH: 550px; HEIGHT: 0px; BORDER-TOP: #0000ff 4pt solid; TOP: 0px; BORDER-RIGHT: #0000ff 4pt solid” width=550 align=center>
<TBODY>
<TR>
<TD bgColor=#ffffff>此处输入文字内容</TD></TR></TBODY></TABLE>

2、双线型边框效果代码:

<TABLE style=”BORDER-BOTTOM: #00ff00 7pt double; POSITION: relative; BORDER-LEFT: #00ff00 7pt double; WIDTH: 550px; HEIGHT: 0px; BORDER-TOP: #00ff00 7pt double; TOP: 0px; BORDER-RIGHT: #00ff00 7pt double” width=”99%”>
<TBODY>
<TR>
<TD bgColor=#ffffff>此处输入文字内容</TD></TR></TBODY></TABLE>

3、凸出型边框效果代码:

<TABLE style=”POSITION: relative; TOP: 0px; HEIGHT: 0px; WIDTH: 550px; BORDER-RIGHT: #999999 11pt outset; BORDER-TOP: #999999 11pt outset; BORDER-LEFT: #999999 11pt outset; BORDER-BOTTOM: #999999 11pt outset”width=”99%” align=center>
<TBODY>
<TR>
<TD bgColor=#ffffcc>此处输入文字内容</TD></TR></TBODY></TABLE>

4、凹陷型边框效果代码:

<TABLE style=”POSITION: relative; TOP: 0px; HEIGHT: 0px; WIDTH: 550px; BORDER-RIGHT: #880000 11pt inset; BORDER-TOP: #880000 11pt inset; BORDER-LEFT: #880000 11pt inset; BORDER-BOTTOM: #880000 11pt inset” width=”99%” align=center>
<TBODY>
<TR>
<TD bgColor=#ff00ff>此处输入文字内容</TD></TR></TBODY></TABLE>

5、虚线型边框效果代码:

<TABLE style=”BORDER-BOTTOM: #cc33ff 3pt dashed; POSITION: relative; BORDER-LEFT: #cc33ff 3pt dashed; WIDTH: 550px; HEIGHT: 0px; BORDER-TOP: #cc33ff 3pt dashed; TOP: 0px; BORDER-RIGHT: #cc33ff 3pt dashed” width=”99%” align=center>
<TBODY>
<TR>
<TD bgColor=#99ff00>此处输入文字内容</TD></TR></TBODY></TABLE>

6、脊状立体边框效果代码:

<TABLE style=”BORDER-BOTTOM: #00ff00 14pt ridge; POSITION: relative; BORDER-LEFT: #00ff00 14pt ridge; WIDTH: 550px; HEIGHT: 0px; BORDER-TOP: #00ff00 14pt ridge; TOP: 0px; BORDER-RIGHT: #00ff00 14pt ridge” width=”99%” align=center>
<TBODY>
<TR>
<TD bgColor=#ccffcc>此处输入文字内容</TD></TR></TBODY></TABLE>

7、凹状双内虚线框样式与代码:

<TABLE style=”POSITION: relative; WIDTH: 550px; HEIGHT: 0px; TOP: 0px” border=10 cellSpacing=2 borderColor=#00cc00 width=550 align=center>
<TBODY>
<TR>
<TD style=”BORDER-BOTTOM: #00cc00 3px dashed; BORDER-LEFT: #00cc00 3px dashed; BORDER-TOP: #00cc00 3px dashed; BORDER-RIGHT: #00cc00 3px dashed”>此处输入文字内容</TD></TR></TBODY></TABLE>

8、点状虚线框效果代码:

9、点状虚线框效果代码:
<TABLE style=”BORDER-BOTTOM: #ccff66 5px dotted; BORDER-LEFT: #ccff66 5px dotted; WIDTH: 550px; HEIGHT: 50px; BORDER-TOP: #ccff66 5px dotted; BORDER-RIGHT: #ccff66 5px dotted” cellSpacing=5 bgColor=#ccff66>
<TBODY>
<TR bgColor=#ff9900>
<TD>此处输入文字内容</TD></TR></TBODY></TABLE>

代码解读：

1、BORDER-RIGHT:表示该边框的右边框线;LEFT表示左边框线;TOP、BOTTOM表示上、下边框线;
2、 #0000ff 表示该边框线的颜色,有关颜色的选取请参照颜色代码表；
3、7pt表示该边框线的粗细度,可根据需要改变其数值;
4、上述代码中的红色部分double表示该边框为单线边框、double为双线边框、outset表示为凸出型边框、inset为凹槽型边框、dashed为虚线型边框等
5、align=center 表示该边框在日志中居正中位置, 需要说明的是:日志页面的总宽度一在720至800之间.只有宽度值小于700以下时,边框才会出现居左、居右或居中的现象; align=left 居左 align=right 居右
6、如果去除上述代码中的最后一行中的bgColor=#ffffff
代码, 最终该边框内部的颜色显示为你日志页面的颜色.如果你想在该边框内添加一种背景颜色,只要在粉红处改变颜色代码即可. 例: #ffffff表示内框背景为白色,现在需要黑色作为背景颜色只要改为#00000即可.
7、 POSITION: relative 边框相对定位，WIDTH 边框的宽 HEIGHT 边框的高度，一般可以不设置由内容自然扩展括。

改变上述代码中的部分代码及数值后,就可以获得各种颜色形状不同的边框

文章版权归作者所有，未经允许请勿转载。

THE END

未分类