0

如何为旧浏览器实现边框图像？
我有 8 张图片：
4 张边框图片（border-top.gif、border-right.gif、border-bottom.gif、border-right.gif）
和 4 个边框角（角的外部是透明的，这很重要）： border-top-left.gif、border-top-right.gif、border-bottom-right.gif、border-bottom-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：带有渐变的图像，所以没有图像就无法做到。

4

2 回答 2

1
  • 容器的相对定位（ .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

匹配其余的以适应

于 2012-05-18T17:48:52.410 回答
0

我建议使用 CSS 精灵。这样您就不必浪费时间分割图像。允许 CSS background-position 声明为您完成工作。

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

于 2012-05-18T17:44:38.740 回答