老浏览器的边界图像实现

Question

如何实现老浏览器的边界图像？
我有8个图像：
4边界图像（border-top.gif，border-right.gif，border-bottom.gif，border-right.gif）
和4边框conners（conners的外部是透明的，这一点很重要）：边界顶级left.gif，边框顶部right.gif，下边框-right.gif，边框底部left.gif，我也有下一个标记：

<div class"block"> 
    <div class="content">A lot of text with images and tables</div> 
    <div class="border-top"></div> 
    <div class="border-right"></div> 
    <div class="border-bottom"></div> 
    <div class="border-left"></div> 
    <div class="border-top-left"></div> 
    <div class="border-top-right"></div> 
    <div class="border-bottom-right"></div> 
    <div class="border-bottom-left"></div> 
</div> 

任何CSS解决方案？如果需要，我可以添加类到标记。
UPD：我知道这很容易做表，但我想找到div的解决方案。
UPD2：图像具有渐变，所以没有办法做到没有图像。

Answer 1

我建议使用CSS sprites。这样您就不必浪费时间来分割图像。允许CSS后台位置声明为您完成工作。

请参见：http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

Answer 2

• 您的容器（.block）

• 容器内的角落div元素的绝对定位的相对定位。

  <style type="text/css"> 
      .block { display:block;position:relative; } 
      .border-top-left { 
        display:block; 
        background-image:url(/folder/topleftcorner.png); 
        background-repeat:no-repeat; 
        width:10px; height:10px; /* size of your corner graphic above */ 
  
        /* this puts it where you want it */ 
        position:absolute; 
        top:0; 
        left:0; 
  
       } 
  </style> 
  

从使用...

 right:0; bottom:0 

匹配了休息，以适应