Question

如何为旧浏览器实现边框图像？
我有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：具有渐变的图像，因此没有图像就无法做到。

Answer 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

匹配其余的以适应

Answer 2

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

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

旧浏览器的边框图像实现

2 个答案: