您现在的位置： 中国古曲网 >> 音画设计 >> 音画设计教程 >> 正文
  [推荐]可以在论坛使用的表格边框特效

可以在论坛使用的表格边框特效
作者：百年爱情    音画来源：http://bbs.guqu.net/index.asp?boardid=59    点击数：    更新时间：2007-11-23

style="border:10px #9900ff dashed"

主要是利用CSS语言边框属性.

border:10px 边框厚度；

#9900ff 边框颜色；

dashed: 边框凤格。

边框凤格属性dashed指短虚线，改变边框凤格属性

还有其他效果.

我们以这张图片为例,给图片加上别具一格的边框效果.

 

一:虚线边框效果

代码如下:

<TABLE style="BORDER-RIGHT: #9900ff 5px dashed; BORDER-TOP: #9900ff 5px dashed; BORDER-LEFT: #9900ff 5px dashed; BORDER-BOTTOM: #9900ff 5px dashed" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="http://bbs.guqu.net/UploadFile/2005-3/20053919505546.jpg">
</TD></TR></TBODY></TABLE>

 

二:多层虚线边框效果:

代码如下:

<TABLE style="BORDER-RIGHT: #9900ff 5px dashed; BORDER-TOP: #9900ff 5px dashed; BORDER-LEFT: #9900ff 5px dashed; BORDER-BOTTOM: #9900ff 5px dashed" 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="BORDER-RIGHT: #9900ff 5px dashed; BORDER-TOP: #9900ff 5px dashed; BORDER-LEFT: #9900ff 5px dashed; BORDER-BOTTOM: #9900ff 5px dashed" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="http://bbs.guqu.net/UploadFile/2005-3/20053919505546.jpg">
</TD></TR></TBODY></TABLE>

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

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

 

三:点虚线边框效果

边框凤格属性dotted：点虚线

代码如下:

<TABLE style="BORDER-RIGHT: #9900ff 10px dotted; BORDER-TOP: #9900ff 10px dotted; BORDER-LEFT: #9900ff 10px dotted; BORDER-BOTTOM: #9900ff 10px dotted" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="http://bbs.guqu.net/UploadFile/2005-3/20053919505546.jpg">
</TD></TR></TBODY></TABLE>

 

四:多层点虚线边框效果

代码如下:

<TABLE style="BORDER-RIGHT: #9900ff 5px dotted; BORDER-TOP: #9900ff 5px dotted; BORDER-LEFT: #9900ff 5px dotted; BORDER-BOTTOM: #9900ff 5px dotted" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #FF6600 10px dotted; BORDER-TOP: #FF6600 10px dotted; BORDER-LEFT: #FF6600 10px dotted; BORDER-BOTTOM: #FF6600 10px dotted" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #9900ff 5px dotted; BORDER-TOP: #9900ff 5px dotted; BORDER-LEFT: #9900ff 5px dotted; BORDER-BOTTOM: #9900ff 5px dotted" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="http://bbs.guqu.net/UploadFile/2005-3/20053919505546.jpg">
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

 

五:solid：实线边框效果.

边框凤格属性solid：实线边框

这个实线边框不用CSS语言也能实现.

代码如下:

<TABLE style="BORDER-RIGHT: #9900ff 10px solid; BORDER-TOP: #9900ff 10px solid; BORDER-LEFT: #9900ff 10px solid; BORDER-BOTTOM: #9900ff 10px solid" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="http://bbs.guqu.net/UploadFile/2005-3/20053919505546.jpg">
</TD></TR></TBODY></TABLE>

 

六:双线边框效果

边框凤格属性double：双线边框

代码如下:

<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><IMG src="http://bbs.guqu.net/UploadFile/2005-3/20053919505546.jpg">
</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><IMG src="http://bbs.guqu.net/UploadFile/2005-3/20053919505546.jpg">
</TD></TR></TBODY></TABLE>

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

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

 

八：双线，短虚线混用效果

代码如下：

<TABLE style="BORDER-RIGHT: #9900ff 8px double; BORDER-TOP: #9900ff 8px double; BORDER-LEFT: #9900ff 8px double; BORDER-BOTTOM: #9900ff 8px double" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #FF6600 15px dashed; BORDER-TOP: #FF6600 15px dashed; BORDER-LEFT: #FF6600 15px dashed; BORDER-BOTTOM: #FF6600 15px dashed" 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><IMG src="http://bbs.guqu.net/UploadFile/2005-3/20053919505546.jpg">
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

 

九：双线，点虚线混用效果

代码如下：

<TABLE style="BORDER-RIGHT: #9900ff 8px double; BORDER-TOP: #9900ff 8px double; BORDER-LEFT: #9900ff 8px double; BORDER-BOTTOM: #9900ff 8px double" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #FF6600 15px dotted; BORDER-TOP: #FF6600 15px dotted; BORDER-LEFT: #FF6600 15px dotted; BORDER-BOTTOM: #FF6600 15px dotted" 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><IMG src="http://bbs.guqu.net/UploadFile/2005-3/20053919505546.jpg">
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

 

十：3D 沟槽状边框效果

边框凤格属性groove：3D 沟槽状

代码如下：

<TABLE style="BORDER-RIGHT: #6F8A91 20px groove; BORDER-TOP: #6F8A91 20px groove; BORDER-LEFT: #6F8A91 20px groove; BORDER-BOTTOM: #6F8A91 20px groove" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="http://bbs.guqu.net/UploadFile/2005-3/20053919505546.jpg">
</TD></TR></TBODY></TABLE>

 

十一：多层3D 沟槽状边框效果

代码如下：

<TABLE style="BORDER-RIGHT: #6f8a91 8px groove; BORDER-TOP: #6f8a91 8px groove; BORDER-LEFT: #6f8a91 8px groove; BORDER-BOTTOM: #6f8a91 8px groove" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #6f8a91 15px groove; BORDER-TOP: #6f8a91 15px groove; BORDER-LEFT: #6f8a91 15px groove; BORDER-BOTTOM: #6f8a91 15px groove" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #6f8a91 5px groove; BORDER-TOP: #6f8a91 5px groove; BORDER-LEFT: #6f8a91 5px groove; BORDER-BOTTOM: #6f8a91 5px groove" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="http://bbs.guqu.net/UploadFile/2005-3/20053919505546.jpg">
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

十二：3D 脊状边框效果

边框凤格属性ridge：3D 脊状

代码如下：

<TABLE style="BORDER-RIGHT: #6F8A91 20px ridge; BORDER-TOP: #6F8A91 20px ridge; BORDER-LEFT: #6F8A91 20px ridge; BORDER-BOTTOM: #6F8A91 20px ridge" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="http://bbs.guqu.net/UploadFile/2005-3/20053919505546.jpg">
</TD></TR></TBODY></TABLE>

 

十三：多层3D 脊状边框效果

代码如下：

<TABLE style="BORDER-RIGHT: #6f8a91 8px ridge; BORDER-TOP: #6f8a91 8px ridge; BORDER-LEFT: #6f8a91 8px ridge; BORDER-BOTTOM: #6f8a91 8px ridge" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #6f8a91 15px ridge; BORDER-TOP: #6f8a91 15px ridge; BORDER-LEFT: #6f8a91 15px ridge; BORDER-BOTTOM: #6f8a91 15px ridge" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #6f8a91 5px ridge; BORDER-TOP: #6f8a91 5px ridge; BORDER-LEFT: #6f8a91 5px ridge; BORDER-BOTTOM: #6f8a91 5px ridge" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="http://bbs.guqu.net/UploadFile/2005-3/20053919505546.jpg">
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

 

十四：3D 内嵌边框效果

边框凤格属性inset：3D 内嵌

代码如下：

<TABLE style="BORDER-RIGHT: #6F8A91 20px inset; BORDER-TOP: #6F8A91 20px inset; BORDER-LEFT: #6F8A91 20px inset; BORDER-BOTTOM: #6F8A91 20px inset" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="http://bbs.guqu.net/UploadFile/2005-3/20053919505546.jpg">
</TD></TR></TBODY></TABLE>

 

十五:多层3D 内嵌边框效果

代码如下:

<TABLE style="BORDER-RIGHT: #6f8a91 8px inset; BORDER-TOP: #6f8a91 8px inset; BORDER-LEFT: #6f8a91 8px inset; BORDER-BOTTOM: #6f8a91 8px inset" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #6f8a91 15px inset; BORDER-TOP: #6f8a91 15px inset; BORDER-LEFT: #6f8a91 15px inset; BORDER-BOTTOM: #6f8a91 15px inset" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #6f8a91 5px inset; BORDER-TOP: #6f8a91 5px inset; BORDER-LEFT: #6f8a91 5px inset; BORDER-BOTTOM: #6f8a91 5px inset" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="http://bbs.guqu.net/UploadFile/2005-3/20053919505546.jpg">
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

 

十六:3D 外嵌边框效果

边框凤格属性outset:3D 外嵌

代码如下:

<TABLE style="BORDER-RIGHT: #6F8A91 20px outset; BORDER-TOP: #6F8A91 20px outset; BORDER-LEFT: #6F8A91 20px outset; BORDER-BOTTOM: #6F8A91 20px outset" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="http://bbs.guqu.net/UploadFile/2005-3/20053919505546.jpg">
</TD></TR></TBODY></TABLE>

 

十七:多层3D 外嵌边框效果

代码如下:

<TABLE style="BORDER-RIGHT: #6f8a91 8px outset; BORDER-TOP: #6f8a91 8px outset; BORDER-LEFT: #6f8a91 8px outset; BORDER-BOTTOM: #6f8a91 8px outset" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #6f8a91 15px outset; BORDER-TOP: #6f8a91 15px outset; BORDER-LEFT: #6f8a91 15px outset; BORDER-BOTTOM: #6f8a91 15px outset" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #6f8a91 5px outset; BORDER-TOP: #6f8a91 5px outset; BORDER-LEFT: #6f8a91 5px outset; BORDER-BOTTOM: #6f8a91 5px outset" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="http://bbs.guqu.net/UploadFile/2005-3/20053919505546.jpg">
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

 

十八:实线,短虚线混用(锯齿边效果)

代码如下:

<TABLE style="BORDER-RIGHT: #6f8a91 8px dashed; BORDER-TOP: #6f8a91 8px dashed; BORDER-LEFT: #6f8a91 8px dashed; BORDER-BOTTOM: #6f8a91 8px dashed" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #6f8a91 15px solid; BORDER-TOP: #6f8a91 15px solid; BORDER-LEFT: #6f8a91 15px solid; BORDER-BOTTOM: #6f8a91 15px solid" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<IMG src="http://bbs.guqu.net/UploadFile/2005-3/20053919505546.jpg">
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

 

 

 
音画录入：采旎    责任编辑：采旎 
【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】
  • 上一篇音画：

  • 下一篇音画：
    •  最新热点  最新推荐  相关文章
    湄水之花
    云的翅膀
    我的思念
    一曲听不懂的动听的歌：）《…
    没有人比我更爱你
    **《真的好想你》！
    【我的心灵鸡汤】
    【妈妈的黑头发】
    生日快乐
    城里的月光
    　　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）
    古曲网-中国古典音乐 商标
    古曲网（中国古典音乐）为中国古典音乐喜好者提供古典音乐试听、中国古典音乐欣赏。古曲网工作人员竭力发扬中国古典音乐这国之文化精髓。
    古曲网站版权声明： 古曲网（中国古典音乐网）上的所有音乐和资料均为作者提供或网友推荐收集整理而来，仅供学习和研究使用，版权归原作者所有。如有侵犯您的版权，请来信指出，我们立即改正或删除。
    设为首页 | 加入收藏 |友情链接 | 版权申明 | 网站公告 | 广告联系 | 本站帮助 | 雁过留声|
    中国古曲网(中国古典音乐)版权所有 CopyRight © 2002-2008 联系我们