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

XUE HAI BLOG

鸟瞰家乡 美丽独特 多骄如画 家乡明天更美好

 
 
 

日志

 
 

☆幾種樣式的圖片邊框代碼  

2009-03-14 12:27:07|  分类: 【邊框制作】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

幾種樣式的圖片邊框代碼

幾 種 樣 式 的 圖 片 邊 框 效 果 圖 及 代 碼

(一)图片加单边框

☆ - 学 海 - XVE HAI BLOG

单边框代码 <TABLE style="BORDER-RIGHT: #6666ff 12px solid; BORDER-TOP: #6666ff 12px solid; WIDTH: 550px; HEIGHT: 116px; BORDER-LEFT: #6666ff 12px solid; BORDER-BOTTOM: #6666ff 12px solid" align=center border=0>
<TBODY>
<TR>
<TD align=middle><IMG style="WIDTH: 550px; HEIGHT: 116px" src="http://img.blog.163.com/photo/7eovyUGslGBJvhufanEpRw==/2822068116501669868.jpg">

(二)图片加双边框

☆ - 学 海 - XVE HAI BLOG

双边框代码

<TABLE style="BORDER-RIGHT: green 12px double; BORDER-TOP: green 12px double; WIDTH: 550px; HEIGHT: 116px; BORDER-LEFT: green 12px double; BORDER-BOTTOM: green 12px double" align=center border=0>
<TBODY>
<TR>
<TD align=middle><IMG style="WIDTH: 550px; HEIGHT: 116px" src="http://img.blog.163.com/photo/7eovyUGslGBJvhufanEpRw==/2822068116501669868.jpg">

(三)图片加立体边框上

☆ - 学 海 - XVE HAI BLOG

立体边框上代码

<TABLE style="BORDER-RIGHT: #ff3333 12px outset; BORDER-TOP: #ff3333 12px outset; WIDTH: 550px; HEIGHT: 116px; BORDER-LEFT: #ff3333 12px outset; BORDER-BOTTOM: #ff3333 12px outset; " align=center border=0>
<TBODY>
<TR>
<TD align=middle><IMG style="WIDTH: 550px; HEIGHT: 116px" src="http://img.blog.163.com/photo/7eovyUGslGBJvhufanEpRw==/2822068116501669868.jpg">

(四)图片加立体边框下

☆ - 学 海 - XVE HAI BLOG

立体边框下代码

<TABLE style="BORDER-RIGHT: #6666ff 12px inset; BORDER-TOP: #6666ff 12px inset; WIDTH: 550px; HEIGHT: 116px; BORDER-LEFT: #6666ff 12px inset; BORDER-BOTTOM: #6666ff 12px inset;" align=center border=0>
<TBODY>
<TR>
<TD align=middle><IMG style="WIDTH: 550px; HEIGHT: 116px" src="http://img.blog.163.com/photo/7eovyUGslGBJvhufanEpRw==/2822068116501669868.jpg">

(五)图片加脊柱边框

☆ - 学 海 - XVE HAI BLOG

脊柱边框代码

<TABLE style="BORDER-RIGHT: #00ff00 12px ridge; BORDER-TOP: #00ff00 12px ridge; WIDTH: 550px; HEIGHT: 116px; WIDTH: 550px; HEIGHT: 116px; BORDER-LEFT: #00ff00 12px ridge; BORDER-BOTTOM: #00ff00 12px ridge" align=center border=0>
<TBODY>
<TR>
<TD align=middle><IMG style="WIDTH: 550px; HEIGHT: 116px" src="http://img.blog.163.com/photo/7eovyUGslGBJvhufanEpRw==/2822068116501669868.jpg">

(六)图片加深色立体边框

☆ - 学 海 - XVE HAI BLOG

深色立体边框代码

<TABLE style="BORDER-RIGHT: #6666ff 12px outset; BORDER-TOP: #6666ff 12px inset; WIDTH: 550px; HEIGHT: 116px; BORDER-LEFT: #6666ff 12px inset; BORDER-BOTTOM: #6666ff 12px outset;" align=center border=0>
<TBODY>
<TR>
<TD align=middle><IMG style="WIDTH: 550px; HEIGHT: 116px" src="http://img.blog.163.com/photo/7eovyUGslGBJvhufanEpRw==/2822068116501669868.jpg">

说 明:区别在代码outset inset 不相同。

(七)图片加浅色立体边框

☆ - 学 海 - XVE HAI BLOG

浅色立体边框代码

<TABLE style="BORDER-RIGHT: #ff3333 12px inset; BORDER-TOP: #ff3333 12px outset; WIDTH: 550px; HEIGHT: 116px; BORDER-LEFT: #ff3333 12px outset; BORDER-BOTTOM: #ff3333 12px inset;" align=center border=0>
<TBODY>
<TR>
<TD align=middle><IMG style="WIDTH: 550px; HEIGHT: 116px" src="http://img.blog.163.com/photo/7eovyUGslGBJvhufanEpRw==/2822068116501669868.jpg">

说 明:区别在代码inset outset 不相同。

(八)图片加虚线边框

☆ - 学 海 - XVE HAI BLOG

虚线边框代码

<TABLE style="BORDER-RIGHT: #ff6633 7px dashed; BORDER-TOP: #ff6633 7px dashed; WIDTH: 550px; HEIGHT: 116px; BORDER-LEFT: #ff6633 7px dashed; BORDER-BOTTOM: #ff6633 7px dashed;" align=center border=0>
<TBODY>
<TR>
<TD align=middle><IMG style="WIDTH: 550px; HEIGHT: 116px" src="http://img.blog.163.com/photo/7eovyUGslGBJvhufanEpRw==/2822068116501669868.jpg">

 说 明:虚线宽度数值7px不宜太大。

(十)框内加框边框

☆ - 学 海 - XVE HAI BLOG
框内加框边框代码

<TABLE style="BORDER-RIGHT: #33ff00 12px ridge; BORDER-TOP: #33ff00 12px ridge; WIDTH: 550px; HEIGHT: 116px; BORDER-LEFT: #33ff00 12px ridge; BORDER-BOTTOM: #33ff00 12px ridge; BACKGROUND-COLOR: #33ff00" cellSpacing=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cc0000 border=6>
<TBODY>
<TR>
<TD>
<TABLE style="WIDTH: 550px; HEIGHT: 116px">
<IMG style="WIDTH: 550px; HEIGHT: 116px" src="http://img.blog.163.com/photo/7eovyUGslGBJvhufanEpRw==/2822068116501669868.jpg">

说 明:添加了红色代码布分、粉色代码为大框背景颜色、蓝色代码为内框颜色和边宽。

学海博客欢迎您!

学海博客欢迎您选用!
学海博客欢迎您选用!

☆幾種樣式的圖片邊框代碼 - 学 海 - XVE HAI BLOG

欢迎您光临学海博客欢迎您光临学海博客欢迎您

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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