GORAGOD.com

กรอบรูปสวยๆ ด้วย CSS


แบบที่ 1 เป็นกรอบสี และมีพื้นเป็นรูป
<style type="text/css">
div.frame1 {
  border:1px solid navy;
  padding:5px;
  background-image:url(f_t.jpg);
}
</style>

<div class="frame1">
  <img alt="" width="70" height="70" src="/datas/users/goro/image/8T1CRY8DQS.jpg" /></div>
</div>


แบบที่ 2 เป็นกรอบสีเช่นกัน แต่พื้นเป็นสีครับ
<style type="text/css">
div.frame2 {
  border:1px solid black;
  padding:5px;
  background-color:#F3E3D9;
}
</style>


แบบที่ 3 กรอบสีอีกแบบหนึ่ง
<style type="text/css">
div.frame3 {
  border:5px solid #F3E3D9;
  padding:1px;
  background-color:black;
}
</style>


แบบที่ 4 กรอบ 2 ชั้น สลับสีกัน
<style type="text/css">
div.frame4_1 {
  border:3px solid #F3E3D9;
  padding:1px;
  background-color:black;
}
div.frame4_2 {
  padding:2px;
  background-color:white;
}
</style>

<div class="frame4_1">
  <div class="frame4_2">
    <img alt="" width="70" height="70" src="/datas/users/goro/image/1WCPKKRN1G.jpg" />
  </div>
</div>