กรอบรูปสวยๆ แบบมีเงา
<style type="text/css">
.imageframe {
padding:5px; /* พื้นที่กรอบของ thumb */
background-image:url(../images/thumbbkg.jpg); /* รูปภาพพื้นของ thumb */
}
.shadow_right { /* กรอบเงา */
background-image:url(../images/shadow_right.gif);
background-repeat:repeat-y;
width:7px;
vertical-align:top;
}
.shadow_top_right {
background-image:url(../images/shadow_top_right.gif);
background-repeat:no-repeat;
width:7px;
height:7px;
float:right;
}
.shadow_bottom {
background-image:url(../images/shadow_bottom.gif);
background-repeat:repeat-x;
height:7px;
}
.shadow_bottom_right {
background-image:url(../images/shadow_bottom_right.gif);
background-repeat:no-repeat;
width:7px;
height:7px;
}
.shadow_bottom_left {
background-image:url(../images/shadow_bottom_left.gif);
background-repeat:no-repeat;
width:7px;
height:7px;
float:left;
} /* กรอบเงา */
</style>
<table class="iconframe" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="imageframe"><img src="../datas/icons/1WCPKKRN1G.jpg" alt="" /></td>
<td class="shadow_right"><div class="shadow_top_right"></div></td>
</tr>
<tr>
<td class="shadow_bottom"><div class="shadow_bottom_left"></div></td>
<td class="shadow_bottom_right"></td>
</tr>
</tbody>
</table>
<table class="iconframe" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="imageframe"><img src="../datas/imagefiles/8RYSG10K9W.jpg" alt="" /></td>
<td class="shadow_right"><div class="shadow_top_right"></div></td>
</tr>
<tr>
<td class="shadow_bottom"><div class="shadow_bottom_left"></div></td>
<td class="shadow_bottom_right"></td>
</tr>
</tbody>
</table>
ตัวอย่าง