单图音画 | 多图音画 | 特效音画 | 摄影素材 | 音画教程 | PhotoShop教程 您现在的位置：中国古曲网>音画设计>特效音画>正文

可以在论坛使用的表格边框特效

音画录入：采旎    责任编辑：采旎  作者：百年爱情    音画来源：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>

 

 

 

分享到：
  • 上一篇音画：

  • 下一篇音画：
    •  最新热点  最新推荐  相关文章
    【瑟秋草音画】秋声
    时光·流转
    倾情
    江湖边
    中国古曲网祝全体会员新年快
    若鱼
    符
    茶
    Dreamcatcher
    听秋
    网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）
    古曲网-中国古典音乐 商标
    古曲网(中国古典音乐网)版权所有 CopyRight © 2004-2009 | 网络带宽由深圳琴行 音乐厅大音琴院赞助