Question

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

这是基本布局：

alt text

这是我到目前为止所得到的内容（我可以避免内容的静态宽度/高度吗？）：

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上的“填充”应不小于图像的宽度/角半径，但如果您愿意，它肯定可以更大。快乐的编码！

划分边框图像

2 个答案: