划分边框图像

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

这是基本布局:

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

HTML:

    

        

            

            

                Content Box Test
            
            

        
        

            

            

            

        
    

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;
}

I GIVE TERRI.. 5

虽然这些都不值得推荐(混合标记和设计),但通常不是集成商得到最终结论.但是,您仍应尝试尽可能保持一切清洁.

您的结构几乎是唯一可以用于结束的结构,但如果您的宽度是静态的(300px？),我建议您将div背景作为一个较大的图像垂直重复.

然后你的div中会有一种页脚,你可以将两个底角和底部图片放在一个单独的图像中.而不是在一个内部有5个div,你只有一个.请注意,在更大的环境中,这也意味着用户可以并行下载2个以上的图像(单个主机最多4个),从而加快页面的整体下载速度.

如果您的宽度相对于父级或者可以以任何方式更改,这显然不起作用.

编辑:因为它发生了你指定宽度是可变的,我不认为有一个更清晰的光方式来做HTML方式.

但是,如果您仍想最大限度地提高图像的下载速度,请考虑使用精灵:东侧和西侧图像可以放在同一个更大的图像中:您修改的唯一内容是背景位置:

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

优点是你只需要一张图片,需要更少的连接来为客户端下载它们(更快)并且它需要尽可能多的地方.

希望这可以帮助.

虽然这些都不值得推荐(混合标记和设计),但通常不是集成商得到最终结论.但是,您仍应尝试尽可能保持一切清洁.

您的结构几乎是唯一可以用于结束的结构,但如果您的宽度是静态的(300px？),我建议您将div背景作为一个较大的图像垂直重复.

然后你的div中会有一种页脚,你可以将两个底角和底部图片放在一个单独的图像中.而不是在一个内部有5个div,你只有一个.请注意,在更大的环境中,这也意味着用户可以并行下载2个以上的图像(单个主机最多4个),从而加快页面的整体下载速度.

如果您的宽度相对于父级或者可以以任何方式更改,这显然不起作用.

编辑:因为它发生了你指定宽度是可变的,我不认为有一个更清晰的光方式来做HTML方式.

但是,如果您仍想最大限度地提高图像的下载速度,请考虑使用精灵:东侧和西侧图像可以放在同一个更大的图像中:您修改的唯一内容是背景位置:

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

优点是你只需要一张图片,需要更少的连接来为客户端下载它们(更快)并且它需要尽可能多的地方.

希望这可以帮助.

您可以通过使用"滑动门"技术以更少的标记实现此目的.基本上,您只需确保每个角落的图像足够大,以便当盒子达到您预期的最大尺寸时它们仍会重叠一点.请参阅此示例,查看包含四个方面图像的框:

    

        

            Lorem ipsum dolor sit amet...
        
    
    
    

        

    

对于只有三面图像的方框,代码会更简单,因为您只需要两个div来将图像附加到:

    

        

        Lorem ipsum dolor sit amet...
        
    

这些示例将为您提供一个可以根据需要增长的弹性框,前提是包含角和边框的图像的大小足够.另请注意,包含div上的"填充"应不小于图像的宽度/角半径,但如果您愿意,它肯定可以更大.快乐的编码!