您好!欢迎您光临图片加边框代码_和谐家园! 聊天室 I 论坛 I 企业建站 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>学习园地>>>图片加边框代码
图片加边框代码
发表日期:2017/3/5 19:05:00 出处:网络 作者:未知 发布人:duhu 已被访问 82

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>

 

 

双击自动滚屏 【打印本页】 【关闭窗口

上篇文章:常用HTML语法

下篇文章:连续播放歌曲代码

 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

和谐家园(二站) | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话:QQ:526761123 联系人:德和

琼icp备09005167