老瀏覽器的邊界圖像實現

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 

匹配了休息，以適應