Div与边框图像

Question

什么是一个好的方式来设置一个单独的容器div与它周围的一些边界图像（在我的情况下只在左侧，底部和右侧）？我把它放在页面顶部，重叠其他所有东西（就像OSX风格的下拉对话框一样）。

这里是基本的布局：

alt text http://www.nickawilliams.com/images/misc/layout.jpg

这里就是我这么远（我能避免内容的静态宽/高）：

HTML：

<div class="contentbox"> 
    <div class="contentbox-wrapper" style="width: 400px"> 
     <div class="contentbox-mid" style="height: 200px"> 
      <div class="contentbox-w"></div> 
      <div class="contentbox-content"> 
       Content Box Test 
      </div> 
      <div class="contentbox-e"></div> 
     </div> 
     <div class="contentbox-bottom"> 
      <div class="contentbox-sw"></div> 
      <div class="contentbox-s"></div> 
      <div class="contentbox-se"></div> 
     </div> 
    </div> 
</div> 

CSS：

.contentbox { 
    width: 100%; 
    position: fixed; 
    z-index: 2; 
} 

.contentbox-wrapper { 
    width: 300px; 
    margin-left: auto; 
    margin-right: auto; 
} 

.contentbox-mid { 
    height: 100px; 
} 

.contentbox-w { 
    width: 30px; 
    height: 100%; 
    background: transparent url("../../images/contentbox_w.png"); 
    float: left; 
} 

.contentbox-content { 
    width: auto; 
    height: 100%; 
    background: #e8e8e8; 
    float: left; 
} 

.contentbox-e { 
    width: 30px; 
    height: 100%; 
    background: transparent url("../../images/contentbox_e.png"); 
    float: left; 
} 

.contentbox-bottom { 
    width: 300px; 
    height: 30px; 
} 

.contentbox-sw { 
    width: 30px; 
    height: 30px; 
    background: transparent url("../../images/contentbox_sw.png"); 
    float: left; 
} 

.contentbox-s { 
    height: 30px; 
    background: transparent url("../../images/contentbox_s.png"); 
    margin-left: 30px; 
    margin-right: 30px; 
} 

.contentbox-se { 
    width: 30px; 
    height: 30px; 
    background: transparent url("../../images/contentbox_se.png"); 
    float: right; 
    position: relative; 
    bottom: 30px; 
} 

Answer 1

尽管这些都不推荐（混合标记和设计），但通常不会得到最终结果的集成商。但是，您仍然应该尽可能保持一切尽可能干净。

虽然如果你的宽度是静态的（300px？），我建议你将div背景作为一个垂直重复的大图像，你的结构几乎是你可以用于结束的唯一结构。

然后，你会在你的div中有一种页脚，你可以把两个底角和底部的图片都放在一个图像中。一个里面没有5个div，你只能有一个。请注意，在更大的环境中，这也意味着用户可以并行下载2个图像（单个主机最多4个），从而使页面的整体下载速度更快。

如果你的宽度是相对于家长的，或者可以以任何方式改变，这显然不起作用。

---

编辑：正如它发生你指定的宽度是可变的，我不认为有一个更清晰的光线方式做HTML明智。

但是，如果您仍然想要最大限度地提高图像的下载速度，请考虑使用精灵：东西方图像可以放在同一个较大的图像中：唯一修改的是背景位置：

background-position: 32px 0px; /* this should move the background to the right */ 

好处是你只需要一张图片，需要较少的连接下载它们的客户端（更快），它需要尽可能多的地方。

希望这会有所帮助。

Answer 2

通过使用“滑动门”技术，您可以用少一点的标记来实现此目的。基本上，您只要确保每个角落的图像足够大，以至于当盒子达到您期望的最大尺寸时，它们仍会重叠一点。看到这个例子对于图像的盒子在四个方面：

<style> 
div.box { float: left; } 
div.tl { background: transparent url('topleft.gif') no-repeat top left; padding-top: 8px; padding-left: 8px; } 
div.bl { background: transparent url('bottomleft.gif') no-repeat bottom left; height: 8px; padding-left: 8px; } 
div.tr { background: transparent url('topright.gif') no-repeat top right; padding-right: 8px; } 
div.br { background: transparent url('bottomright.gif') no-repeat bottom right; padding-right: 8px; } 
</style> 

<div class="box"> 
    <div class="tr"> 
     <div class="tl"> 
      Lorem ipsum dolor sit amet... 
     </div> 
    </div>  
    <div class="br"> 
     <div class="bl"></div> 
    </div> 
</div> 

有关只有三面与图像框的代码会更简单，因为你只需要两个div将图像附加到：

<style> 
div.box { float: left; } 
div.bl { background: transparent url('bottomleft.gif') no-repeat bottom left; padding-left: 8px; } 
div.br { background: transparent url('bottomright.gif') no-repeat bottom right; padding-right: 8px; } 
</style> 

<div class="box"> 
    <div class="br"> 
     <div class="bl"> 
     Lorem ipsum dolor sit amet... 
     </div> 
    </div> 
</div> 

这些例子会给你一个有弹性的盒子，可以随意增长，只要包含角落和边框的图像大小足够。还要注意，包含div的“填充”应该不小于图像的宽度/角半径，尽管如果您愿意的话它的确可以更大。下面是几张图片来说明这种方法。快乐的编码！

The corner/border graphics http://www.mikrogroove.com/stackoverflow/corners.gif

Images overlapping http://www.mikrogroove.com/stackoverflow/overlapping.gif