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

.花雨伞欢迎你

.

 
 
 

日志

 
 

【转载】【边框模版】图片加边框代码  

2013-05-16 12:15:33|  分类: 精美边框 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

图片加边框代码
 
这里教大家只需用html代码就能给你的图片加出各种漂亮的相框,使用方法,点“<>”加入代码,换上你的图片网址,适当调整宽度和颜色,就可以让你的图片锦上添花!下面是代码:
 
1、简单线框

  <img src="图片地址" style="border:5 solid #ffCCCC">

  2、双线框

  <img src="图片地址" style=" border:7 double #666FF">

  3、虚线框

  <img src="图片地址" style=" border:3 dashed #990000">

  4、凸出框:

  <img src="图片地址" style="border:10 outset #CCCCFF">

  5、嵌入框:

  <img src="图片地址" style="border:15 inset #ff9900">

  6、脊状框:

  <img src="图片地址" style="border:15 ridge #33FF66">

  7、凹槽框

  <img src="图片地址" style="border:15  groove #CC6666">

  8、粒状阴影框

  <img src="图片地址" style="filter:progid:DXImageTransform.Microsoft.Glow(color=#ccFF66,strength=30">

做个效果:

原图:

给图片加边框代码 - 桑榆 - 我歌夕阳

 

  1、简单线框  

 给图片加边框代码 - 桑榆 - 我歌夕阳  

 2、双线框  

 给图片加边框代码 - 桑榆 - 我歌夕阳  

 3、虚线框  

 给图片加边框代码 - 桑榆 - 我歌夕阳  

 4、凸出框:  

 给图片加边框代码 - 桑榆 - 我歌夕阳  

 5、嵌入框:  

 给图片加边框代码 - 桑榆 - 我歌夕阳  

 6、脊状框:   

给图片加边框代码 - 桑榆 - 我歌夕阳  

 7、凹槽框  

 给图片加边框代码 - 桑榆 - 我歌夕阳   

8、粒状阴影框   

给图片加边框代码 - 桑榆 - 我歌夕阳

代码:

<P>  1、简单线框  </P>
<P> <IMG style="BORDER-RIGHT: #ffcccc 5px solid; BORDER-TOP: #ffcccc 5px solid; BORDER-LEFT: #ffcccc 5px solid; BORDER-BOTTOM: #ffcccc 5px solid" src="http://img.blog.163.com/photo/IQXeLjdqencTITjSQeKQ0g==/2880896386633654789.jpg">  </P>
<P> 2、双线框  </P>
<P> <IMG style="BORDER-RIGHT: 7px double; BORDER-TOP: 7px double; BORDER-LEFT: 7px double; BORDER-BOTTOM: 7px double" src="http://img.blog.163.com/photo/IQXeLjdqencTITjSQeKQ0g==/2880896386633654789.jpg">  </P>
<P> 3、虚线框  </P>
<P> <IMG style="BORDER-RIGHT: #990000 3px dashed; BORDER-TOP: #990000 3px dashed; BORDER-LEFT: #990000 3px dashed; BORDER-BOTTOM: #990000 3px dashed" src="http://img.blog.163.com/photo/IQXeLjdqencTITjSQeKQ0g==/2880896386633654789.jpg">  </P>
<P> 4、凸出框:  </P>
<P> <IMG style="BORDER-RIGHT: #ccccff 10px outset; BORDER-TOP: #ccccff 10px outset; BORDER-LEFT: #ccccff 10px outset; BORDER-BOTTOM: #ccccff 10px outset" src="http://img.blog.163.com/photo/IQXeLjdqencTITjSQeKQ0g==/2880896386633654789.jpg">  </P>
<P> 5、嵌入框:  </P>
<P> <IMG style="BORDER-RIGHT: #ff9900 15px inset; BORDER-TOP: #ff9900 15px inset; BORDER-LEFT: #ff9900 15px inset; BORDER-BOTTOM: #ff9900 15px inset" src="http://img.blog.163.com/photo/IQXeLjdqencTITjSQeKQ0g==/2880896386633654789.jpg">  </P>
<P> 6、脊状框:   </P>
<P><IMG style="BORDER-RIGHT: #33ff66 15px ridge; BORDER-TOP: #33ff66 15px ridge; BORDER-LEFT: #33ff66 15px ridge; BORDER-BOTTOM: #33ff66 15px ridge" src="http://img.blog.163.com/photo/IQXeLjdqencTITjSQeKQ0g==/2880896386633654789.jpg">  </P>
<P> 7、凹槽框  </P>
<P> <IMG style="BORDER-RIGHT: #cc6666 15px groove; BORDER-TOP: #cc6666 15px groove; BORDER-LEFT: #cc6666 15px groove; BORDER-BOTTOM: #cc6666 15px groove" src="http://img.blog.163.com/photo/IQXeLjdqencTITjSQeKQ0g==/2880896386633654789.jpg">   </P>
<P>8、粒状阴影框   </P>
<P><IMG style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#ccFF66,strength=30" src="http://img.blog.163.com/photo/IQXeLjdqencTITjSQeKQ0g==/2880896386633654789.jpg"> </P>

 

——————————————————

原图:
 
给图片加边框代码 - 桑榆 - 我歌夕阳
 
1. 图片单边框的代码:
<center><img
src="http://img.blog.163.com/photo/eoEb_OuOuUmR5em3pNsqjw==/1149262329909942520.jpg" style="border:3 solid #ff0000"></center>
 
下面是一的效果图:
给图片加边框代码 - 桑榆 - 我歌夕阳
 
2.图片双边框的代码:
 <center><img
src="http://img.blog.163.com/photo/eoEb_OuOuUmR5em3pNsqjw==/1149262329909942520.jpg" style="border:5 double green"></center>
下面是二的效果图:
给图片加边框代码 - 桑榆 - 我歌夕阳
 
3.立体镜框的代码(一):
 <center><img src=http://img.blog.163.com/photo/eoEb_OuOuUmR5em3pNsqjw==/1149262329909942520.jpg
style="border:25 outset #ff88ff"></center>
 
下面是三的效果图:
给图片加边框代码 - 桑榆 - 我歌夕阳
 
4.立体镜框的代码(二):
 <center><img
src="http://img.blog.163.com/photo/eoEb_OuOuUmR5em3pNsqjw==/1149262329909942520.jpg" style="border:25 inset #ff88ff"></center>
 
下面是四的效果图:
给图片加边框代码 - 桑榆 - 我歌夕阳
 
5.虚线框的代码:
<center> <img src="http://img.blog.163.com/photo/eoEb_OuOuUmR5em3pNsqjw==/1149262329909942520.jpg" style="border:4 dashed #ff0000"></center>
下面是五的效果图:
给图片加边框代码 - 桑榆 - 我歌夕阳
 
6.凹槽框的代码:
 <center> <img src="http://img.blog.163.com/photo/eoEb_OuOuUmR5em3pNsqjw==/1149262329909942520.jpg" style="border:25 groove green" border="0"></center>
下面是六的效果图:
给图片加边框代码 - 桑榆 - 我歌夕阳
 
7.脊状框的代码:
 <center> <img src="http://img.blog.163.com/photo/eoEb_OuOuUmR5em3pNsqjw==/1149262329909942520.jpg" style="border:25 ridge green" border="0"></center>
下面是七的效果图:
给图片加边框代码 - 桑榆 - 我歌夕阳

 

八:立体阴影框代码如下:

<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)" height=100 cellSpacing=3 cellPadding=15 width=100 border=2>
<TBODY>
<TR>
<TD Align=center align=middle bgColor=#ffffff><IMG src="图片地址"></TD></TR></TBODY></TABLE>

效果图:

给图片加边框代码 - 桑榆 - 我歌夕阳

 

九:立状阴影代码如下:

<IMG style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#cc8888,strength=30)" src="图片地址">

效果图:

给图片加边框代码 - 桑榆 - 我歌夕阳

 

        当然以上代码也可用在制作日记的边框上,或者个人档案里的文字和图片,大家可以举一反三。颜色可以改为自己喜欢的。

全屏FLASH代码

注意:&要换成小写&

<img src=";nnerHTML+=''<div style=\'';top:0;left:0;\''><EMBED src=\''地址\'' quality=high wmode=\''transparent\'' WIDTH=\''775\'' HEIGHT=\''655\'' TYPE=\''application/x-shockwave-flash\''></div>'';">

或者

<img src=";rHTML+=''<div style=\'';top:0;left:0;\''><EMBED src=\''FLASH地址\''quality=high wmode=\''transparent\'' WIDTH=\''1000\'' HEIGHT=\''700\'' TYPE=\''application/x-shockwave-flash\''></div></div>'';">

 

图片类代码 - 小小 - 单线框代码
<img src="图片地址" style="border:5 solid #ffffff">


图片类代码 - 小小 - 双线框代码
<img src="图片地址" style="border:7 double #ffffff">


图片类代码 - 小小 - 虚线框代码
<img src="图片地址" style="border:3 dashed #ffffff">


图片类代码 - 小小 - 立体框代码
<img src="图片地址" style="FILTER:progid:DXImageTransform.Microsoft.Shadow(color:#ffffff,direction:145,strength:15)">


图片类代码 - 小小 - 凸出框代码
<img src="图片地址" style="border:10 outset #ffffFF">


图片类代码 - 小小 - 嵌入框代码
<img src="图片地址" style="border:15 inset #ffffff">


图片类代码 - 小小 - 脊状框代码
<img src="图片地址" style="border:15 ridge #ffffff">


图片类代码 - 小小 - 凹槽框代码
<img src="图片地址" style="border:15 groove #ffffff">


图片类代码 - 小小 - 阴影框代码
<img src="图片地址" style="filter:progid:DXImageTransform.Microsoft.Glow(color=#ffffff,strength=30">


图片类代码 - 小小 - 雾化效果1代码
<img style="FILTER: Alpha(opacity=100,style=1)" src="图片地址">


图片类代码 - 小小 - 雾化效果2代码
<img style="FILTER: Alpha(opacity=100,style=2)" src="图片地址">


图片类代码 - 小小 - 雾化效果3代码
<img style="FILTER: Alpha(opacity=100,style=3)" src="图片地址">


图片类代码 - 小小 - 黑白效果代码
<img style="FILTER: gray" src="图片地址">


图片类代码 - 小小 - X线效果代码
<img style="filter:'xray'" src="图片地址">


图片类代码 - 小小 - 浮雕效果代码
<img style="filter:progid:DXImageTransform.Microsoft.Emboss()" src="图片地址">


图片类代码 - 小小 - 上下颠倒代码
<img style="filter:flipv" src="图片地址">


图片类代码 - 小小 - 左右颠倒代码
<img style="filter:fliph" src="图片地址">


图片类代码 - 小小 - 色彩颠倒代码
<img style="filter:invert" src="图片地址">


图片类代码 - 小小 - 模糊效果代码
<img style="filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=3)" src="图片地址">


图片类代码 - 小小 - 风动模糊效果代码
<img style="FILTER: blur(add=true,direction=45,strength=30)" src="图片地址">


图片类代码 - 小小 - 正弦波纹效果代码
<img style="FILTER: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3)" src="图片地址">


图片类代码 - 小小 - 水波效果代码
<img style="filter:wave(freq=11, strength=4, phase=6, lightstrength=10)" src="图片地址">


图片类代码 - 小小 - 水中倒影效果代码
<img style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()" src="图片地址">


图片类代码 - 小小 - 半透明效果代码
<img style="filter:alpha(opacity=50)" src="图片地址">


图片类代码 - 小小 - 线性透明效果代码
<img style="FILTER: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140)" src="图片地址">


图片类代码 - 小小 - 放射透明效果代码
<img style="FILTER: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200)" src="图片地址">


图片类代码 - 小小 - 白色为透明效果代码
<img style="FILTER: Chroma(Color=#FFFFFF)" src="图片地址">




图片边框代码 - 桑榆 - 我歌夕阳

一、简要框 代码:<P>&nbsp;<IMG style="BORDER-RIGHT: #ffcccc 5px solid; BORDER-TOP: #ffcccc 5px solid; BORDER-LEFT: #ffcccc 5px solid; BORDER-BOTTOM: #ffcccc 5px solid" src="http://image.92wy.com/Upload/Image/2008/0118/2008011815273495444139_s.jpg"></P>


 

图片边框代码 - 桑榆 - 我歌夕阳

二、双线框 代码:<P><IMG style="BORDER-RIGHT: 7px double; BORDER-TOP: 7px double; BORDER-LEFT: 7px double; BORDER-BOTTOM: 7px double" src="http://image.92wy.com/Upload/Image/2008/0118/2008011815273476235022_s.jpg"> <BR><BR> 

 

图片边框代码 - 桑榆 - 我歌夕阳

三、虚线框  代码:<P>&nbsp;<IMG style="BORDER-RIGHT: #990000 3px dashed; BORDER-TOP: #990000 3px dashed; BORDER-LEFT: #990000 3px dashed; BORDER-BOTTOM: #990000 3px dashed" src="http://image.92wy.com/Upload/Image/2008/0118/2008011815273470018677_s.jpg"><BR><BR> 

 

图片边框代码 - 桑榆 - 我歌夕阳

四、凸出框 代码:<P><IMG style="BORDER-RIGHT: #ccccff 10px outset; BORDER-TOP: #ccccff 10px outset; BORDER-LEFT: #ccccff 10px outset; BORDER-BOTTOM: #ccccff 10px outset" src="http://image.92wy.com/Upload/Image/2008/0118/2008011815273412376201_s.jpg"><BR><BR>

图片边框代码 - 桑榆 - 我歌夕阳

五、嵌入框 代码;<P><IMG style="BORDER-RIGHT: #ff9900 15px inset; BORDER-TOP: #ff9900 15px inset; BORDER-LEFT: #ff9900 15px inset; BORDER-BOTTOM: #ff9900 15px inset" src="http://img.blog.163.com/photo/dQENt6jLTWqEPhCjEI6ggQ==/2014797883295381546.jpg"><BR><BR>

图片边框代码 - 桑榆 - 我歌夕阳

 六、脊状框 代码: <P> <IMG style="BORDER-RIGHT: #33ff66 15px ridge; BORDER-TOP: #33ff66 15px ridge; BORDER-LEFT: #33ff66 15px ridge; BORDER-BOTTOM: #33ff66 15px ridge" src="http://img.blog.163.com/photo/2V-0sTfgsftnRLiW-NNWJw==/2329486907257743769.jpg"><BR><BR>

图片边框代码 - 桑榆 - 我歌夕阳

七、凹槽框 代码:<P>&nbsp;<IMG style="BORDER-RIGHT: #cc6666 15px groove; BORDER-TOP: #cc6666 15px groove; BORDER-LEFT: #cc6666 15px groove; BORDER-BOTTOM: #cc6666 15px groove" src="http://img.blog.163.com/photo/e9t7Hk7gIooThDtrTqpwyQ==/306807724614974871.jpg"><BR><BR>

图片边框代码 - 桑榆 - 我歌夕阳

8、粒状阴影框 代码:<P><IMG style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#ccFF66,strength=30" src="http://img.blog.163.com/photo/CgpjR6EyN3fO61pEtks63Q==/2306124484190794305.jpg"> </P>

 







一、边框表格的基本语法
表格边框效果
代码如下<table width="200" height="120" border="5" cellspacing="5" cellpadding="5" align="center" valign="middle" bgcolor="#f0ffff" bordercolor=#00ff00><tr><td>文字</td></tr></table>
基本语法释义
在上面框内这段代码里的<table.........><tr><td>文字<*/td><*/tr><*/table>就组成边框表格的基本语法:开始标签,内容,结束标签.这三个标记<table><tr><td>是定义表格的最重要的标记,可以说学懂这三个就足己制作一个边框表格了. 
先看懂这个代码: 
table:这是一个做表格的元素,要描述内容的属性都写在由它组成的开始标签里.
tr:描述列的元素,列就是从上到下的行.
td:描述格的元素,格就是每行里的格(大概意思).
table的属性常用的有: 
width= 表格宽度,接受绝对值(如180)及相对值(如 80%,相对可显示的宽度) 
height= 表格高度,接受绝对值(如 180) 
border= 表格框的厚度. 
cellspacing= 表格格线离边框距离 
cellpadding= 文字图片离格线的距离. 
align= 表格的摆放位置(水平),可选值为: left, right,center(左,右,中心) 
valign= 表格内字画等的摆放贴位置(垂直)可选值为: top, middle, bottom。(顶,中间,底部 ) background= 表格的背景图,与 bgcolor 不要同用。 bgcolor= 表格背景颜色,与background 不要同用. bordercolor= 表格边框颜色. bordercolorlight= 表格边框向光部分的颜色. bordercolordark= 表格边框背光部分的颜色,(使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效)
二、边框的制作
1.颜色框: 简单地只要写上表格边框颜色属性 bordercolor 和边框的厚度属性 border,再写上表格的宽 width 和高 height 就会显示一个你所指定的颜色框.

颜色框效果
代码如下<table bordercolor=#00ff00 border=5 align=center width=200 height=120 cellspacing=0><tr><td>文字</td></tr></table>
这里多写了一个格线属性cellspacing=0,格线就是上面第一个边框里的那根细线(打表格用的),不写格线属性浏览器就默认为1.我们不需要格线时,请一定写上cellspacing=0,这个默认有时会捣乱的. 右边是不写的效果:
cellspacing=0不写的效果
框定好宽和高以后,如果放在里面的内容大于它,则按大的显示.例如还是上面那个尺寸的框,放进一张大的图片
:
表格的制作 - Q仔 - Q仔*网易博客
代码如下<table align=center bordercolor=#00ff00 border=5 width=200 height=120 cellspacing=0><tr><td><img src=图片地址 width=200></td></tr></table>
以上的效果提示我们要注意两点:
1)有时按需要定好框的尺寸,不容许再变的,那就要注意放进去的内容不能大于框的尺寸,以免撑大. 
2)因为放进去的内容会撑大框,有时干脆不写表格的尺寸,让内容自动撑大反而会服贴.
三、素材框
利用素材图片做框的原理是:把素材图片做成各种背景图,再把背景图一张张覆盖上去,每后一张都比前一张小一点,这些边上露出来的小一点就组成了一个框的效果. 边框要做多少层就要做多少个背景图,要做成多少个背景图也就是要做多少个表格.每后一个表格都要放到前一个表格里. 要使每后一张都比前一张小一点的方法:只要在前一张代码里设定格线厚度cellspacing=就行了,设定多大就露多大.(我们经常看到的漂亮边框就是这样做出来的)
素材边框效果
代码如下<table align="center" border="0" cellpadding="0" cellspacing="10" width="90%" background="第一层背景图片地址"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="5" width="100%" background="第二层背景图片地址"><tr><td bgcolor=#000000>文字</td></tr></table></td></tr></table>
在框内添加一张图片效果如下:
表格的制作 - Q仔 - Q仔*网易博客
代码如下<TABLE cellSpacing=10 cellPadding=0 align=center background=第一层背景图片地址 border=0> <TBODY><TR><TD> <TABLE cellSpacing=5 cellPadding=0 width="100%" align=center background=第二层背景图片地址 border=0> <TBODY><TR><TD> <IMG src=框内的图片地址 width=250 twffan="done"></TD></TR></TBODY>
</TABLE></TD></TR></TBODY></TABLE>
看懂这些代码的意思了吗?其实最重要的还是应该做到前面有几个开始标签,结束就必须有收尾标签。音画帖往往做框用很多表格,里面又大框套小框的用很多表格,由于疏忽经常会出现少写或多写收尾。使得整个帖变形. 正常来说:做了几个表格,就必须有几组收尾标签,多一个少一个都不行.( 即:多少<td><tr><table>对应多少</td></tr></table>)。(网易博客具有默认兼容)
四、图和文字放进框里的方法及注意点
代码格式:<table ......><tr><td>内容</td></tr></table>
将图和文字的代码从上到下按顺序代替上面的"内容"放到表格里. 代码安放的一些注意点: 
1.竖向处理:,首先,表格属性里不写高 height ,这样可让内容自动撑高. 凡是要空行的地方可用换行标签<br>来设定,不够可以多加几个<*br>,到满意为止, 也可用分段标签<P>......</P>,不够再加<br>
2.横向处理:首先,在最后一层表格里写上文字图片离格线的距离属性: cellpadding= .不让内容靠边. 再强调一遍,放进去的所有内容的宽度不要大于框的内宽,为了美观还要它们小一点. 图片宽度好设定,文字一般也用<br>分行的方法来限定它的宽度。
3.内容居中:将位置属性align=center放到最后一层表格的<td>标签里,框里的内容就会都居中了,代码格式:<table ......><tr><td align=center>内容</td></tr></table>
五、如何隐藏表格的四个边框
表格边框的显示与隐藏,是可以用frame参数来控制的。请注意它只控制表格的边框图,而不影晌单元格。 
只显示上边框 <table frame=above>
只显示下边框 <table frame=below> 
只显示左、右边框 <table frame=vsides>
只显示上、下边框 <table frame=hsides>
只显示左边框 <table frame=lhs>
只显示右边框 <table frame=rhs>
不显示任何边框 <table frame=void>




如果你喜欢此日志,请点击下面的“推荐”,让大家分享,也算是对Q仔

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
 

 在此写入博客日志……

日志背景边框(动态内侧装饰)

 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

 

 

 

 

 

 

日志背景边框(动态内侧装饰)  

 

 

 

 

  

 

 

 

 

 

 

 

 

 

 

 日志背景边框(动态内侧装饰)

 

 

 

 

 

 

 

  

 

 

日志背景边框(动态内侧装饰) 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

   

志背景边框(动态内侧装饰) 

 

 

 

 

 

 

 


  评论这张
 
阅读(72)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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