html - 如何使用周围 div 标签边框的图像来赋予自定义边框外观？

Question

我已将以下 css 设置为 div 容器的 ger 边框图像，但问题是我的右图像没有出现在边框上，但是当它伸展时，它会在 div 容器的右边框侧留下空间。

<div id="container">
<div id="left-image"></div>
<div id="main-containts">
    <div id="data-containts">
    data
    </div>
</div>
<div id="right-image"></div>



   <div id="bottom">

       <div id="bottom-left"></div>
       <div id="bottom-center"></div>
       <div id="bottom-right"></div>

   </div>


</div>



div#container{
    position:relative;
    margin-left:120px;
    margin-right:120px;
    float:top;
    padding-top:0;
    margin-bottom:50px;
    width:auto;
    height:100%;
}
div#left-image{
    position:absolute;
    left:0;
    width:28px;
    height:100%;
    float:left;
    background:url(border-left.png) repeat-y;   
    }

   div#right-image{
    position:absolute;
    right:0;
    float:right;
    width:30px;
    height:100%;
    margin-right:0;
    background:url(border-right.png) repeat-y;
    }   
    div#bottom{
    position:absolute;
    bottom:0;
    width:100%;
    height:36px;
    z-index:100;
   }
    div#bottom-left{
width:51px;
height:36px;
background:url(corner-left.png) no-repeat;
float:left;
}   
div#bottom-center{

height:36px;
background:url(bottom-image.png) repeat-x;
margin-right:49px;
/*clear:both:*/
}       
    div#bottom-right{
width:49px;
height:36px;
background:url(corner-right.png) no-repeat;
float:right;
margin-top:-36px;

}       

Answer 1

如果您只针对支持 css3 的现代浏览器。它可以通过 css3 的边框图像属性轻松完成。如果您不知道的话，值得看看该物业。

http://css-tricks.com/understanding-border-image/

如果您希望上述代码正常工作，请粘贴您的 div 结构。