|
图片加边框
可有两种方法；
1）利用表格；
2）利用图框钻专用代码
下面是一张带框的图片
代码是
<table border=6 cellSpacing=12 cellPadding=10 borderColor=#841A00>
<tr><td>
<img src=图片网址 width=600 height=407>
</td></tr>
</table>
说明：
border="6" 表示外格线的宽度
cellspacing="12" 表示格线间的宽度
cellPadding=10 表示内格线至图片的距离
borderColor=#841A00 边框色彩
利用图框钻专用代码加边框
图框的种类
solid 单边框
double 双边框
outset 立体镜框
inset 立体镜框
dashed 虚线框
outset 凸出框
inset 凹进框
dashed 邮票框
groove 凹槽框
ridge 脊状框
1.单线框
设定格线的宽度border:3
色彩#ff0000
单线框solid
<img src="图片地址" style="border:3 solid #ff0000">
效果：
2.双线框
设定格线的宽度border:5
色彩green
双线框double
<img src="图片地址" style="border:5 double green">
效果：
3.凸出框
设定格线的宽度border:25
色彩#ff88ff
凸出框outset
<img src="图片地址"style="border:25 outset #ff88ff">
效果：
4.凹进框
设定格线的宽度border:25
色彩#ff88ff
凹进框inset
<img src="图片地址" style="border:25 inset #ff88ff">
效果：
5.邮票框
设定格线的宽度border:3
色彩#f6ae56
.邮票框dashed
cellspacing="5"
cellpadding="0"
bgcolor="#f6ae56
代码
<table style="border:3 dashed #f6ae56" cellspacing="5" cellpadding="0" bgcolor="#f6ae56">（对边框的设置）
<tr>
<td
bgcolor="#aeffae" width=533 height=399 align=center valign=middle>（对框内内容的设置）
<img src="图片地址">
</td>
</tr></table>
效果：
6.虚线框
设定格线的宽度border:4
色彩#ff0000
虚线框 dashed
<img src="图片地址" style="border:4 dashed #ff0000">
效果：
7.凹槽框
设定格线的宽度border:25
色彩green
凹槽框groove
<img src="图片地址" style="border:25 groove green" border="0">
效果：
8.脊状框
设定格线的宽度border:25
色彩green
脊状框ridge
<img src="图片地址" style="border:25 ridge green" border="0">
效果：
9.立体阴影框
<table width=400 height=400 border=2 cellpadding="15" cellspacing="3" （对边框的设置）
style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)">
<tr>
<td bgcolor="#ffffff" align=center valign=middle>（对框内内容的设置）
<img src="图片地址"></td>
</tr></table>
效果：
10阴影框
<DIV>
<DIV><A href="http://hi.baidu.com/al6906/home" target=_blank>
<FONT size=4><IMG style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#ccFF66,strength=30" src="http://image30.360doc.com/DownloadImg/2011/06/0116/12319492_1.jpg">
</FONT></A></DIV></DIV>
效果
| 
![http://image30.360doc.com/DownloadImg/2011/06/0116/12319492_1.jpg"></FONT></A></DIV></DIV](http://image30.360doc.com/DownloadImg/2011/06/0116/12319492_1.jpg"></FONT></A></DIV></DIV){kind=link}