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

.

.

 
 
 

日志

 
 

如何给'图片'添加漂亮的边框?(原创)  

2008-05-06 21:03:39|  分类: 边框的制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

 
将向博客新手详细解讲制作过程
撰文:寒冬腊月 

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

 

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

 

                    --------用代码为 "图片" 添加边框的方法---------             

 

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

             其实给'图片'加边框的方法有很多种,通常的方法:就是利图片处理软件来实

  现.这也是很多博友都会做的.

      那么,今天我特向大家介绍一种----用代码为"图片"添加边框的方法.虽然步

  骤有点烦,但制作出来的边框也很漂亮哦!有兴趣的朋友,可以动手试一试...

      下面,先让我们来它的效果图及复制代码: 

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

 

1、单线边框:

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

 

代码复制区:

<P align=center><IMG style="BORDER-RIGHT: #ff0000 3px solid; BORDER-TOP: #ff0000 3px solid;

 BORDER-LEFT: #ff0000 3px solid; BORDER-BOTTOM: #ff0000 3px solid"

src="http://img.blog.163.com/photo/ZpBXMeWlIQ4V7VwYyDwvFQ==/3687322194909962575.jpg">

</P>

 代码解析说明:

<1>、align=center,表示图片在页面中显示的位置居中,把'center'改成'right'表示居右;图片紧靠左边,只需把'center'改成'left'即可;

<2>、BORDER-RIGHT表示图片右侧边框、BORDER-LEFT表示图片左侧边框、 BORDER-TOP表示图片上

层边框、BORDER-BOTTOM表示图片下层边框;

<3>、BORDER-RIGHT: #ff0000 3px solid,这段代码中,粉红色表示图片右边框线;绿色处表示边框线

的颜色;红色处表示该边框的粗细;兰色处表示该边框为单线边框.

<4>、是最重点的一步,上面这段代码中兰色处即 "solid"表示单边线框;也就是说只要改变"solid"就能得

到不同效果的边框了. 

           例如:            solid=单线边框 、     outset=凸出线边框    、  double=双线边框  、   

 inset=凹出边框 、    dashed=虚线型边框 ...       

<5>、代码中兰色处为图片地址,你可以将你所选图片地址放进代码中,再复制代码把它放进代码框中即可.   

<5>、操作过程中,选好你要制作边框的图片再根据需要选择相应的边框,点击'预览'查看它的效果图.如不

满意可适当修改代码中的数居值.

 

2、双线边框:

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

  

代码复制区:

<P align=center><IMG style="BORDER-RIGHT: green 5px double; BORDER-TOP: green 5px double;

BORDER-LEFT: green 5px double; BORDER-BOTTOM: green 5px double"

src="http://img.blog.163.com/photo/ZpBXMeWlIQ4V7VwYyDwvFQ==/3687322194909962575.jpg">

</P> 

3.凸出框

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .


 

代码复制区:

 <P align=center><IMG style="BORDER-RIGHT: #ff88ff 25px outset; BORDER-TOP: #ff88ff 25px outset;

BORDER-LEFT: #ff88ff 25px outset; BORDER-BOTTOM: #ff88ff 25px outset"

src="http://img.blog.163.com/photo/ZpBXMeWlIQ4V7VwYyDwvFQ==/3687322194909962575.jpg">

</P>

 4、凹进边框:

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

 

代码复制区:

<P align=center><IMG style="BORDER-RIGHT: #ff88ff 25px inset; BORDER-TOP: #ff88ff 25px inset;

 BORDER-LEFT: #ff88ff 25px outset; BORDER-BOTTOM: #ff88ff 25px inset"

src="http://img.blog.163.com/photo/ZpBXMeWlIQ4V7VwYyDwvFQ==/3687322194909962575.jpg">

</P>


 5、邮票型边框:

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

代码复制区:

<TABLE style="BORDER-RIGHT: #f6ae56 3px dashed; BORDER-TOP: #f6ae56 3px dashed;

BORDER-LEFT: #f6ae56 3px dashed; WIDTH: 180px; BORDER-BOTTOM: #f6ae56 3px dashed;

HEIGHT: 256px" cellSpacing=5 cellPadding=0 align=center bgColor=#f6ae56>
<TBODY>
<TR>
<TD vAlign=center align=middle height=256><FONT size=4><IMG style="WIDTH: 180px; HEIGHT: 256px"

 src="http://img.blog.163.com/photo/ZpBXMeWlIQ4V7VwYyDwvFQ==/3687322194909962575.jpg">

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

 

6、虚线型边框

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

 

代码复制区:

 <P align=center><IMG style="BORDER-RIGHT: #ff88ff 4px dashed; BORDER-TOP: #ff88ff 4px dashed;

 BORDER-LEFT: #ff88ff 4px dashed; BORDER-BOTTOM: #ff88ff 4px dashed"

src="http://img.blog.163.com/photo/ZpBXMeWlIQ4V7VwYyDwvFQ==/3687322194909962575.jpg">

</P>

 

7.凹槽框

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

 

代码复制区:

 <P align=center><IMG style="BORDER-RIGHT: green 15px groove; BORDER-TOP: green 15px groove;

BORDER-LEFT: green 15px groove; BORDER-BOTTOM: green 15px groove"

src="http://img.blog.163.com/photo/ZpBXMeWlIQ4V7VwYyDwvFQ==/3687322194909962575.jpg">

</P>

8.立体阴影框

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

 

代码复制区:

<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,

strength:15)" height=245 cellSpacing=3 cellPadding=15 width=170 border=2>
<TBODY>
<TR>
<TD vAlign=center align=middle bgColor=#ffffff><IMG

src="http://img.blog.163.com/photo/ZpBXMeWlIQ4V7VwYyDwvFQ==/3687322194909962575.jpg">

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

9、凹状双线框

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

代码复制区:

<TABLE borderColor=#ACC00FF  cellSpacing=2 cellPadding=1 align=center  border=9>

<TBODY>

<TR>

<TD><IMG src=http://img.blog.163.com/photo/ZpBXMeWlIQ4V7VwYyDwvFQ==/3687322194909962575.jpg>

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

 10、凹状双内虚线框

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

代码复制区:

<TABLE borderColor=#0000ff cellSpacing=2  cellSpacing=1  align=center  border=8>

<TBODY>

<TR>

<TD><IMG src="http://img.blog.163.com/photo/ZpBXMeWlIQ4V7VwYyDwvFQ==/3687322194909962575.jpg" style="border:3 dashed #00cc00"></TD></TR></TBODY></TABLE>

  

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

  ◇简单"边框"的制作方法◇  ◇"边框"的代码分析◇
  ◇如何不用图片做"边框"的方法◇  ◇用动、静态图片组合制作"边框"◇
  ◇用"静态"图片做"边框"的方法◇  ◇怎样给"图片"添加漂亮的"边框"◇
  ◇多层"边框"的添加方法◇  ◇如何改变"边框"中各边框线的粗细值◇
  ◇如何调整"边框"的宽度及高度◇  ◇怎样改变边框颜色及边框线数值◇
  ◇边框内层背景颜色的替换方法◇  ◇为你提供精美的"边框"及"边框"素材◇

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

 如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

 

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .
新手入门篇 文字类制作 图片类制作 日历、时钟制作
博客素材类 "边框"的制作 u5 教程 PS 教程
情感天地 生活常识 教子必读 音画欣赏
男人女人 测算运气 驾车技巧 幽默笑话
●新手入门篇●/●文字类制作●/●图片类制作●/●日历、时钟制作类●/●博客制作(素材类)●/●"边框"的制作●

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

   如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .  点击进入   在我的博客,更多精彩等着你!

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

如何给图片添加漂亮的边框?(原创) - 寒冬腊月 - .

  评论这张
 
阅读(11636)| 评论(17)
推荐 转载

历史上的今天

评论

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

页脚

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