GORAGOD.com

แสดงเงาด้านขวาและล่างของกรอบ ไม่ต้องกังวลเรื่องขนาดของกรอบเพราะเงาจะปรับไปตามขนาดของรูปโดยอัตโนมัติ

<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>