用css创建带框的图像

Question

如何根据这张图片创建间歇性框架：

HTML code：

 <div id="frm">
     <img src="img/main.jpg">
      <img src="img/imgT.png">
      <img src= "img/imgR.png">
      <img src="img/imgL.png">
      <img src="img/imgB.png"> 
</div>

Answer 1

HTML

<div id="frm" height="100px" width="75px">
  <img class="main" src="" alt="" height="100px" width="75px" >
  <img class="top" src="" alt="" height="1px" width="77px">
  <img class="bottom" src="" alt="" height="1px" width="77px">
  <img class="left" src="" alt="" height="100px" width="1px">
  <img class="right" src="" alt="" height="100px" width="1px">
</div>

CSS

    #frm {
      position:absolute;
    }

    img {
      position:absolute;
    }

    .top {
      top:0px;
      margin-top:0px;
    }

    .right {
      margin-left:75px;
    }

    .bottom{
      margin-top:100px;
    }