多福老人歡迎您http://qwp43.360doc.com圖片加邊框
可有兩種方法;
1)利用表格;
2)利用圖框鉆專用代碼
下面是一張帶框的圖片
代碼是
<table border=6 cellSpacing=12 cellPadding=10 borderColor=#841A00>
<tr><td>
<img src=圖片網(wǎng)址 width=600 height=407>
</td></tr>
</table>
說明:
border="6" 表示外格線的寬度
cellspacing="12" 表示格線間的寬度
cellPadding=10 表示內(nèi)格線至圖片的距離
borderColor=#841A00 邊框色彩
利用圖框鉆專用代碼加邊框
圖框的種類
solid 單邊框
double 雙邊框
outset 立體鏡框
inset 立體鏡框
dashed 虛線框
outset 凸出框
inset 凹進框
dashed 郵票框
groove 凹槽框
ridge 脊狀框
1.單線框
設(shè)定格線的寬度border:3
色彩#ff0000
單線框solid
<img src="圖片地址" style="border:3 solid #ff0000">
效果:
2.雙線框
設(shè)定格線的寬度border:5
色彩green
雙線框double
<img src="圖片地址" style="border:5 double green">
效果:
3.凸出框
設(shè)定格線的寬度border:25
色彩#ff88ff
凸出框outset
<img src="圖片地址"style="border:25 outset #ff88ff">
效果:
4.凹進框
設(shè)定格線的寬度border:25
色彩#ff88ff
凹進框inset
<img src="圖片地址" style="border:25 inset #ff88ff">
效果:
5.郵票框
設(shè)定格線的寬度border:3
色彩#f6ae56
.郵票框dashed
cellspacing="5"
cellpadding="0"
bgcolor="#f6ae56
代碼
<table style="border:3 dashed #f6ae56" cellspacing="5" cellpadding="0" bgcolor="#f6ae56">(對邊框的設(shè)置)
<tr>
<td
bgcolor="#aeffae" width=533 height=399 align=center valign=middle>(對框內(nèi)內(nèi)容的設(shè)置)
<img src="圖片地址">
</td>
</tr></table>
效果:
6.虛線框
設(shè)定格線的寬度border:4
色彩#ff0000
虛線框 dashed
<img src="圖片地址" style="border:4 dashed #ff0000">
效果:
7.凹槽框
設(shè)定格線的寬度border:25
色彩green
凹槽框groove
<img src="圖片地址" style="border:25 groove green" border="0">
效果:
8.脊狀框
設(shè)定格線的寬度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" (對邊框的設(shè)置)
style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)">
<tr>
<td bgcolor="#ffffff" align=center valign=middle>(對框內(nèi)內(nèi)容的設(shè)置)
<img src="圖片地址"></td>
</tr></table>
效果:
10陰影框
<DIV>
<DIV><A href="
<FONT size=4><IMG style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#ccFF66,strength=30" src="
>
效果