注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

长白枩博客欢迎你

http://zsbai1001.blog.163.com

 
 
 

日志

 
 

几款凸感边框代码  

2014-04-14 19:10:59|  分类: 博客代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自浅醉一生 初试啼声 《几款凸感边框代码》

几款凸感边框代码

一、颜色背景、固定宽度的凸感边框:

代 码

<TABLE style="BORDER-RIGHT: #66CDAA 15px ridge;

BORDER-TOP: #66CDAA 15px ridge;

BORDER-LEFT: #66CDAA 15px ridge;

BORDER-BOTTOM: #66CDAA 15px ridge;

BACKGROUND-COLOR: #660000" cellSpacing=1>
<TBODY><TR><TD>
<TABLE cellSpacing=1 width=600 border=2>
<TBODY><TR>
<TD>

日志内容

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

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


效 果

 

日志内容

 

 

 

二、图片背景、固定宽度的凸感边框:

代 码

<TABLE style="BORDER-RIGHT: #66CDAA 15px ridge;

BORDER-TOP: #66CDAA 15px ridge;

BORDER-LEFT: #66CDAA 15px ridge;

BORDER-BOTTOM: #66CDAA 15px ridge;" cellSpacing=1>
<TBODY><TR><TD>
<TABLE cellSpacing=1 width=600 
background=图片地址 border=2>
<TBODY><TR>
<TD>

日志内容

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

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

 

效 果

 

日志内容

 

 

 

三、透明背景、最大化宽度的凸感边框:

代 码

<TABLE style="BORDER-RIGHT: #66CDAA 15px ridge;

BORDER-TOP: #66CDAA 15px ridge;

BORDER-LEFT: #66CDAA 15px ridge;

BORDER-BOTTOM: #66CDAA 15px ridge;

WIDTH: 100%;" cellSpacing=1>
<TBODY><TR><TD>
<TABLE cellSpacing=1 width="100%" 
border=2>
<TBODY><TR>
<TD>

日志内容

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

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

 

效 果

 

日志内容

 

 

 

四、透明背景、弹性化宽度的凸感边框:

代 码

<TABLE style="BORDER-RIGHT: #66CDAA 15px ridge;

BORDER-TOP: #66CDAA 15px ridge;

BORDER-LEFT: #66CDAA 15px ridge;

BORDER-BOTTOM: #66CDAA 15px ridge;" cellSpacing=1>

<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>

 

效 果

日志内容

 

 

总  说 明

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

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

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

4、第四款边框“日志内容”输入的地方,其边框宽度随着内容的增多,会自动逐渐放大。

 

 

 

  评论这张
 
阅读(3)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018